teleren/devto huggingface dataset:
Keeping it short and simple
Published: 2022-03-28 20:16:56

Continuing my progress in the Telescope repository for Release 3.0 my Search bar PR from last week got some reviews. Unfortunately, I was not really given any "feedback", aside from being told the PR was too big, and to split it up. 

![Image description](https://media.giphy.com/media/bGyKPJ40CDJja/giphy.gif)
 
Hearing this was extremely disappointing. A part of myself thought I was over splitting this issue any further - yet we've managed to come across this thrice. There's no way to separate the UI from the backend anymore - the backend is all ready. So what I've done to remove the old search bar UI more easily is I have put functionality for ONLY author and post search. In another PR I can add the rest of the fields (i.e. title, dates).  

In my [new PR](https://github.com/Seneca-CDOT/telescope/pull/3211), instead of tackling all four issues, I only decided to tackle one. Which is the UI for the search bar. In this PR, I will address new UI for the existing fields. In the second PR, I can address [issue 2894](https://github.com/Seneca-CDOT/telescope/issues/2894), where we can search by new fields, date and title. Both of these PRs should build on the last issue, [issue 2110](https://github.com/Seneca-CDOT/telescope/issues/2110), which is for the advanced search dialogue. 

Unlike my PR for search, my previous PR for the translation services got a lot of feedback. I got a lot of feedback on my code, which was nice, but some of it was being nit-picky so I decided to put my foot down. There were a lot of complaints about the UI. I understood the issue, however, the PR was never meant to address the UI for this. I ended up creating a [new issue](https://github.com/Seneca-CDOT/telescope/issues/3141) for this. To be honest, I really do not like MUI and would prefer not to have to tackle this. We are using an older version of it, however, there is not much customization.
CSS Positioning lightbulb
Tags: css, beginners, tutorial
Published: 2022-03-28 20:13:45

https://youtu.be/jx5jmI0UlXU

Going through TOP right now, and this is one of the videos they include in the CSS portion of the curriculum. I have read quite a few articles on this to try and get it to "click". This one made it significantly easier for me to understand.


Hopefully it can save you a couple hours of trial and error if you are new like me.
How to set up systemd targets in CENTOS
Published: 2022-03-28 19:44:51


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9dah8y8mpkrt4tv141u.png)You have been handed a server that needs to be customized according to a specific standard. complete the following objectives 

__OBJECTIVES__
1. carryout a check list on the default target in order to make sure the custom target you will create works.
2. Your custom target should be identical to your default target. Except that it should want httpd service.

__Experience level__
Basic

1. __verify default target__
To verify default target: __systemctl get-default__
To set it to multi user target: _systemctl set-default multiuser.target__
To isolate the target: __systemctl isolate multiuser.target__

2. __CREATE custom.target__
a) Change directory: __cd/etc/systemd/system__

b) create a file by copying multi-user.target into custom.target: __/usr/lib/systemd/system/multi-user.target ./custom.target

c) open the file: __nano custom.target__
d) Edit the [unit] section:
          [Unit]
          Description=Custom Target
          Documentation=man:systemd.special(7)
          Requires=basic.target
          Wants=httpd.service
          Conflicts=rescue.service rescue.target
          After=basic.target rescue.service rescue.target
          AllowIsolate=yes
e) use the __ctrl X__ option to save and quit
    check if httpd is already installed in the server: _rpm -q httpd__
    if not installed, do __yum install httpd -y__

f) isolate custom.target
g) check status of httpd: __systemctl status httpd__

If we try to isolate into multi-user.target, we will see that httpd is dead because it is not set up to want Apache service.
4 Sites to Download PNG Images for Free
Tags: png, free, images
Published: 2022-03-28 19:41:39

A series of sites where you can download icons, clips and images in PNG format with transparent background that can also be used for commercial purposes.

**Introduction**
A selection of sites where you can download images, icons, clips in .PNG format even with a transparent background.
Also I suggest you some online services for converting and compressing images.
When you download an image from the web, carefully check the usage license. Some sites require a backlink to use the resource.

**The PNG vs Jpg format**
Portable Network Graphics (acronym PNG) is a file format used to store images in lossless compressed format. It is recommended for presentation icons and images. PNG can store 24-bit images. By way of comparison, the GIF is limited to 8 bits and 256 colors. PNG allows you to have the background transparent.

The JPG format has excellent compression which, however, is done at the expense of data loss or can no longer return to the original image because the compression operation is not reversible.
With this format, the advice I can give you is to keep the original (master) of the image and then proceed with a copy of the same with the compression application before uploading to the web.

In conclusion, the PNG format is less efficient with images that contain too many details such as photographs, while for sharing photos it is better to use the Jpg format.

Image source search tools
If you need to look for the source of an image or where it has already been used, here are some useful sites for this purpose.


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

[ Images.google.com]( Images.google.com)
With Images.google.com you can search the web for images. Upload the image with the appropriate option to find out in which sites it has been used. When you use an image you find on the net, always check the license for use. Some licenses do not require you to use the images for derivative works.

[freestockpng.com](https://freestockpng.com) is a [free PNG images](https://freestockpng.com) where you can download high quality transparent PNG images with no background. Over 300,000 free high resolution transparent PNG photos online. The license to use is indicated in the tab of each image.

[Pngfreeassets.com](https://Pngfreeassets.com) 
Online compression of PNG images. Recommended for use if you need to upload images for a website or a social network.

[pngfreeicons.com](https://pngfreeicons.com)
Converts WebP images (compressed format for high resolution images created by Google for webmasters) to PNG and APNG (Animated PNG) formats

**Conclusion**
I have selected some sites where I found interesting images in PNG format to use for my websites,
Всі МФО Украина
Published: 2022-03-28 17:00:32

[Мікрофінансові організації України](https://credit-online24.pp.ua/mfo/) – список
Компанії, що видають мікрокредити та позики, зазвичай пропонують позичити гроші за ставкою до 1-1,5% на день. Але деякі МФО зі списку мікрокредитних організацій видають новим клієнтам мікропозики без відсотків.

## На що звертати увагу при виборі варіантів зі списку МФО 2022:

- Розмір процентної ставки.
- Допустимий діапазон сум, що видаються.
- Максимальний період кредитування не менше ніж 2 тижні.
- Швидкий розгляд заявок та високий відсоток їх схвалення.
- Список МФО Казахстану – взяти термінову мікропозику
- Вимоги до позичальників мінімальні: паспорт з реєстрацією в Україні, особистий мобільний телефон для активації договору і регулярне джерело доходу (не обов'язково офіційний). Перед оформленням позики переконайтесь, що обрана мікрофінансова організація полягає у реєстрі МФО НБУ. Це гарантує законність її діяльності.

---

Інформація про всі популярні МФО ▻ Реальні відгуки користувачів ✍ Контактна інформація мікрофінансових організацій ✓ Умови кредитування.

> 
Докладніше: http://credit-online24.pp.ua/
Set Xdebug coverage for Laravel
Tags: php, laravel, xdebug
Published: 2022-03-28 19:27:36

Laravel 9 has a new feature added by Nuno Maduro to get code coverage for specific Laravel projects, the command is `php artisan test --coverage`, in this article I am going to explain how to set xdebug locally in a MacOS environment.


## Check that you have installed Xdebug

In your local environment you can run this command:

```php
php -v
```

You should be able to see the php version, but also more data like xdebug version installed locally, like this:

![Terminal output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtrosu2w4vujpt2zqzc5.png)


If you have not installed XDEBUG here you would find [an article to install xdebug](https://dev.to/arielmejiadev/install-xdebug-in-montereyos-2d96)

---

## Get PHP.ini file location

Then to check the `php.ini` file location (it changes from different php versions) run this command:

```
php --ini
```

It should return in the second line the `php.ini` file location.

![Terminal output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dij99jtthgf24n8qkces.png)

You can use a code editor like vscode or use `nano` or other editor to update the file, here I would add an example with both for `php 8.0.x` as it is required for Laravel 9:

---

## Set Xdebug mode

Grab the file location and edit the `php.ini` file:

```
// Command to open files with vscode... it is easier
code /usr/local/etc/php/8.0/php.ini

// or

nano /usr/local/etc/php/8.0/php.ini
```

Then add at the very bottom this line:

```
xdebug.mode=develop,debug,coverage
```

Now you are able to run:

```
php artisan test --coverage
```

and it should work and return something like this:

![Terminal output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg7y70dkezrm78lh6m5b.png)
 
---

## Excluding Framework files

The `test --coverage` command would return a percentage of coverage, it is evaluating a lot of files, some of them not fully covered, so you can exclude this file to just test your own code implementations in `phpunit.xml` file, like this:

```
    <coverage processUncoveredFiles="true">
        <include>
            <directory suffix=".php">./app</directory>
        </include>
        <exclude>
            <directory suffix=".php">./app/Macros</directory>
            <file>./app/Http/Middleware/Authenticate.php</file>
            <file>./app/Http/Middleware/RedirectIfAuthenticated.php</file>
            <file>./app/Http/Middleware/TrustHosts.php</file>
            <file>./app/Http/Middleware/TrustProxies.php</file>
            <file>./app/Providers/BroadcastServiceProvider.php</file>
            <file>./app/Providers/HorizonServiceProvider.php</file>
            <file>./app/Providers/TelescopeServiceProvider.php</file>
        </exclude>
    </coverage>
```

You can customize even more the `coverage` tags, but at this point your code coverage is higher.


That is all, thanks for reading the article, and `may the code coverage be with you`.
5 sec about a11y - users
Tags: a11y, interface, user
Published: 2022-03-28 19:25:09

I started the story about accessibility from the middle, sorry for that. So, I'm correcting my mistake!

The story about a11y should start with users, because we add it to interfaces for them. We write apps, code websites and create designs for users.

A11y is needed not for certain groups of users, but for all users - and I'll prove it.

A11y helps people get information not only in the way that is convenient for us. The a11y principles help to solve the problems that the user faces.

These problems can accompany a person **all his life** - for example, blindness. They may **last for some time** or until certain **conditions** are met - this is a cataract, a broken arm. The third group of problems depends on the **situation** - young mother's busy hands and concentration of attention on the child, the difficulty to hear in a noisy room.

Problems are also classified by the reason of their occurrence - **visual**, **auditory**, **cognitive**, **motor**.

Often, problems prevent us from getting the experience that we put into our interfaces. And here the a11y principles help: we cannot provide the exactly the same experience for all users, but we can convey the information they need or provide the similar experience.

So, any of us can face accessibility difficulties - they depend on the situation or temporary, while others accompany all our life. And the a11y principles help to provide the information to users with different problems in a variety of ways. It also enriches the user experience for all users, and not just opens up access to information for certain groups.
[Generasi Gigih (Time Management)]
Published: 2022-03-28 16:31:45

Manajemen waktu adalah salah satu keterampilan yang dibutuhkan jika kamu memiliki banyak deadline di dalam rentan waktu yang terbatas. Beberapa dari kita akan mengalami kesulitan dalam mengatur waktu sehingga waktu yang dimiliki tidak dapat dimanfaatkan secara maksimal.

Berikut 5 tips yang dapat kamu gunakan agar bisa memaksimalkan waktu yang dimiliki.

### 1. **Catat**.

   Biasakan diri untuk mencatat segala hal yang ingin dilakukan. Kamu bisa mencoba notion atau obsidian sebagai tools yang dapat digunakan. Apapun toolsnya asalkan kamu bisa mencatatkan segala kegiatanmu disana.

### 2. **Lebih Spesifik**.

Setelah mencatakan semua hal yang ingin kamu lakukan kamu dapat memecah hal tersebut menjadi beberapa bagian kecil yang kemudian dapat kamu jadikan beberapa task. Semakin banyak kamu mengurai pekerjaanmu menjadi bagian-bagian kecil akan semakin baik.

### 3. **Tentukan Prioritas**.

Identifikasi kegiatan kamu yang sudah dipecah menjadi beberapa task kemudian tentukan prioritas dari setiap task yang kamu sudah catat sebelumnya. Kamu dapat memprioritaskan  taskmu menjadi 4 bagian, yaitu: penting mendesak, penting tidak mendesak, tidak penting tapi mendesak, dan tidak penting dan tidak mendesak.

### 4. **Jangan menunda-nunda**.

Lakukan apa yang dapat kamu lakukan. Semakin kamu menunda pekerjaan yang dapat kamu lakukan semakin banyak juga beban yang akan kamu rasakan.

### 5. **Istirahatlah Sejenak**.

Tidak semuanya dapat kamu lakukan dalam satu waktu. Jika kamu merasa gagal dalam mengatur waktu, tak apa karena ini bukan hal yang mudah. Istirahatlah sejenak untuk memikirkan hal apa yang kurang dari prosesmu.

Semoga bermanfaat.
Terminal komandalari | Part 5
Tags: beginners, linux, bash, uzb
Published: 2022-03-28 18:59:35

### `g++`
- `g++ main.cpp -o dastur && ./dastur` - komandasi `main.cpp` faylini kompilyatsiya qiladi va birdaniga ishga tushuradi.

### `alias`
- `alias run='g++ main.cpp -o dastur && ./datur'` - ushbu komanda orqali yuqoridagi kodni qayta-qayta yozmasdan, oddiy qilib `run` deb yozish orqali dasturni kompiliyatsiya qilish mumkin.
2 años como Front-End Developer, ¿Qué he aprendido?
Published: 2022-03-28 18:30:36

## No debes saberlo todo

Está bien equivocarse, está bien cometer errores, todos lo hacen, está bien sentirte perdido, esta bien, aprende a perdonarte por los errores, esto va mas alla del codigo, es un consejo personal. 

## No tengas miedo a preguntar

Esta es una continuación al punto anterior, aprende a perdonarte por no saber algo y no tengas miedo de preguntarle a tus compañeros, todos podemos aprender de todos, yo he enseñado cosas nuevas a mis seniors y ellos mucho más a mi, eso esta bien, es lo mas lindo de nuestra profesión.

### NO hagas 500 cursos, practica cada cosa que aprendas

Esto es un problema que solemos tener los Juniors, sobretodo los que somos autodidactas, tendemos a devorar cursos como dulces sin probar ni practicar lo que vamos aprendiendo poco a poco.

### 2 horas de prueba y error te pueden salvar de 5min de leer documentación...

Esto nos ha pasado a todos y es una consecuencia de los dos primeros puntos, la documentación es muy importante y generalmente no es tomada en cuenta por los Juniors pero es una herramienta indispensable para cualquier desarrollador.

## Descansa

¿Has pasado horas probando el mismo código, sin éxito? ¿Cansado de leer StackOverflow, documentación y ver tutoriales?
Entonces, es momento de descansar. Ve a dormir, juega una partida, camina, hazte un café. Para, relájate y vuelve al rato, tu yo futuro te lo agradecerá.
Chattergram - a chat app that transcribes voice messages!
Tags: hackwithdg, deepgram, deeplearning, ai
Published: 2022-03-28 18:09:38

---
title: Chattergram - a chat app that transcribes voice messages!
published: true
description: My submission to the Deepgram Hackathon on DEV!
tags: hackwithdg, deepgram, deeplearning, ai
---

A month ago, I received a series of voice messages from a friend that lasted 15 minutes

**Fifteen**

**Minutes**

By the time I listened, I could have

- Taken a shower
- Prepared lunch
- Call him and quickly speak about what bugs him
- Write the code for this hackathon (which, in fact, I did during the time he was busy recording the second series)

I talked to my gf about it that day. How much I would prefer if people just called. **Or wrote a text message**. 

![Chattergram-banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fkttl56z3pc527g6col.png)

Fast forward, I read the announcement here. And well, you can imagine what instantly came to mind.

**What if stop word-filled monologues like this one could be transcribed?**

### What problem does Chattergram solve?

Let's talk more serious. More often than not one finds themselves in a situation in which they cannot listen to spoken text. 

- Because they're in a silent part of the train (is that a thing outside of germany?). Or in a crowded office/public space. You could read - but not listen to - a message
- Maybe they are in a hurry and just want to skim through the text very quick
- Due to a disease that causes them to be hearing impaired

> The sender could still record their message. Just now the receiver can **choose** whether to listen or read.

### Overview of My Submission

> Chattergram is a full stack Typescript app that transcribes voice messages into readable text. 

> It aims to make voice messages more accessible by giving the receiver a **choice**. Read it. Or listen.

![preview of the chat section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hotxbqqmxvccum0cz5lg.gif)

I have prepared a demo under https://chat.q-bit.me/. It uses the remaining credits from my trial phase - feel free to give it a shot.
 
### Submission Category: 

Accessibility Advocates

### Link to Code on GitHub

{% github https://github.com/tq-bit/chattergram %}

### Additional Resources / Info

Attached in the readme.md file, please have a look here: https://github.com/tq-bit/chattergram#getting-started
Coding Space Invaders in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas
Tags: gamedev, tutorial, beginners, javascript
Published: 2022-03-28 18:06:28

In this exciting video we are going to make the classic game Space Invaders with JavaScript on a HTML canvas. Best of all we will code everything from scratch starting with an empty project. 

In this classic game we have our enemies at the top of the screen; they move side to side and down towards our player. At random the enemies will shoot bullets.  At the bottom of the screen we have our spaceship which can shoot at the enemies. Unlike the original game our bullets shoot much faster, which also makes the game much more fun. The objective is to stay alive, avoid the enemy bullets and eliminate the enemies before they reach the bottom of the screen.

We will cover the following topics and more:
Game loop
Keyboard input
Moving our enemies
Collision detection
Shooting bullets 
Game Audio

GitHub:
https://github.com/CodingWith-Adam/space-invaders

Try the game:
https://codingwith-adam.github.io/space-invaders/index.html


Take the video tutorial:

{% youtube qCBiKJbLcFI %}
A free & open source tool by Facebook to create your blog site
Tags: react, markdown, tutorial, webdev
Published: 2022-03-28 18:03:00


Hey There 👋🏾

Are you looking to start a developer blog soon? 

Do you already have one but you are not happy with it and want to migrate it?

I have news for you. Read along 👇🏾

### Features
Before jumping into why this tool is amazing, let us first set the definition for what makes a blogging tool great. 

- It let's you write in **markdown**
- There definitely needs to be code **syntax** highlighting
- markdown is not enough, there need to be **custom elements**
- There should be a support to create custom **non-markdown** pages
- And off-course, a **dark mode**.
- How about a **site-wide search** as well?

What if I told you that there is a framework that supports all these features right out of the box and that it is freely available?

Well, here it is: [Docusaurus](https://docusaurus.io/).
![docusaurus image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adgocyjzapnasf4imwh9.png)

It is a documentation framework by Facebook which is used by some of the giants in the industry like: [ionic](https://ionicframework.com/docs), [redux](https://react-redux.js.org/), [react native](https://reactnative.dev/) and hundreds more as mentioned on this [page](https://docusaurus.io/showcase). But do not assume it to be just a documentation tool. 

It is an all inclusive toolkit to build full-fledged website like this one: [Technical Interview Handbook](https://www.techinterviewhandbook.org/)

Here's the main page custom built with React:
![interview handbook main page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vdcb3zv3or8n1yojxsq.png)
The brilliance of the website above is that they have even customized it to show **Carbon Ads** in the sidebar. 

Here's how a sample page in the site looks like:
![interview handbook sample article](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0ldloeqsa958f9i7y35.png)

Notice the green visual element. It adds a nice touch to the UI. Good enough for a blog site, right?

Interested? Want to know how to create your own?

This video will guide you with just that:

{% youtube wDUSzD8VZtY %}

### In the video:
- A walkthough of docusaurus **features**
- How to create a **home** page
- How to utilize the **blog** feature
- How to utilize the **tutorial** feature

Cheers! 🙌🏾