teleren/devto huggingface dataset:
Solving networking specifically for developers
Published: 2021-02-11 19:05:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tf8py25qira4cwllwfj9.jpeg)

**Note**: Networking in this case refers to, “Interact with others to exchange information and develop professional or social contacts”.

So you have an idea but not sure how you’re gonna build it, right? You also think it has a large potential but you just can’t seem to figure how to build it all and manage everything ranging from public outreach to constructing a community all by yourself because unlike a lot of developers ( the ones you see flexing their rudimentary skills on LinkedIn for no apparent reason ), you don’t have reliable network of developers who’d be instantly willing to work with you, you’d need to twist some ends to make things sure, and that doesn’t provide you with enough assurance either. You want to explore new projects, and contribute to them but how do you even know what project is based good for your skill level instantly? And it’d be nice to have a direct chat with the creator of that project, right?

If you are that sort of person, the one who can relate to the previous segment, then you are not only well aware but rather proactively live the problem of broken networking for developers. There’s Tinder for dating, tuned matches using AI ( not sure to what extent it’s true that they use AI and not just those elo-rated systems ), LinkedIn for professional networking, Instagram for as the general social media but what about developers? Developers still have to resort to real life meetups, Discord servers, LinkedIn, and various forums to meet new developers and out of those developers, only a few connections are built on the premise of building something. **We, at ConnectDome, acknowledge this as a problem because we believe that there should be proper networking models for developers as well, one where any developer could go on, find people to work with instantly on their existing projects as well as find projects to work on instantly based on their skills and experience.**

As of now, we have released the alpha version of our vision for networking for developers, there’s still a long way ahead to implement everything we have planned ( some big stuff! ) but what we have right now uses AI ( machine learning algorithms ) to match you with the best possible developer available on ConnectDome that “you” can work with (based on your skillset, experience, etc ), the top notch project recommendations tuned for you, and a ‘Team’ feature for all the approved interested candidates on your own projects.
We think that this solution can solve a problem lingering unnoticed or rather, unaddressed for longer than it should’ve been. Meeting on forums is cool, but guess what’s easier and cooler? **Matching instantly with the right developers and projects**.

You can try all of this at https://connectdome.com/ **absolutely free.**

You can also join our community at https://discord.domecode.com/

**This message is approved by the Founder and CEO of ConnectDome, Arth Tyagi.**
Angular I18nSelect Pipe 🚀
Tags: angular, javascript, webdev, beginners
Published: 2021-02-11 18:29:03

`I18nSelect` is an Angular built- in pipe that takes a string as an argument and displays a corresponding value from the mapping object. 

It is very useful especially when working with **pluralization** and **gender information** 🧑🏽👩🏼🧑

Let’s take a look at a simple party guest list 🎉
We’re going to introduce each of the guests. To do so we need to use the correct conjugations and pronouns. And here comes the `i18nSelect` pipe.


```typescript
public guests = [
    {
      gender: "female",
      name: "Fallon",
      age: 27
    },
    {
      gender: "male",
      name: "Blake",
      age: 46
    },
    {
      gender: "other",
      name: "Miki",
      age: 32
    }
]
```


Next step is creating the mapping objects. 

* `genderMap` is defining the mapping between gender and pronouns
* `verbMap` is defining the mapping between gender and verbs 

```typescript
genderMap = { 
    male: "he", 
    female: "she", 
    other: "they" 
  };


  verbMap = { 
    male: "is", 
    female: "is", 
    other: "are" };
}
```


Once the mapping rules are defined we are ready to use them in the template 🔥



```html
<div *ngFor="let guest of guests">
	<div>
		<span> This is {{ guest.name }}, </span>
		<span> {{ guest.gender | i18nSelect : genderMap }} </span>
		<span> {{ guest.gender | i18nSelect : verbMap }} </span>
		<span> {{ guest.age}} </span> year old.
	</div>
</div>
```

**Output**
![output](https://dev-to-uploads.s3.amazonaws.com/i/s8q55noqb67r2jsgen0r.JPG)
 
Hope you're having a great one, and I'll see you for more 60 Seconds of Angular posts in the future 🥳

In case you missed it:
* [Angular KeyValue Pipe](https://dev.to/maggy24/angular-keyvalue-pipe-529h) 🚀
เข้าถึง props ทั้งหมดด้วย $$propsใน svelte3
Tags: svelte3, slot, slotcontent
Published: 2021-02-11 18:55:21

### Props ใน Svelte คืออะไร
props คือการ pass ค่าต่างๆไปให้ child component ใช้งาน สามารถ pass props แบบ static และ pass แบบ object หรือใช้การ pass แบบ spread props

```javascript
/** Button.svelte */

<script>
export let title;
</script>

<button>
  {title}
</button>

```

```javascript
/** App.svelte */

<script>
import Button from "./Button.svelte";
</script>

<main>
  <Button title='Toggle' />
</main>

```

#### pass props แบบ static
`title='Toggle' ` เรียกว่าการ pass แบบ static

#### pass props ผ่านตัวแปร
```javascript
/** App.svelte */

<script>
import Button from "./Button.svelte";
const title = 'Toggle'
</script>

<main>
  <Button title={title} />
</main>

หรือ

<main>
  <Button {title} />
</main>

```
`title={title} ` เรียกว่าการ pass props ผ่านตัวแปร


#### pass props ผ่าน Object
```javascript
/** App.svelte */

<script>
import Button from "./Button.svelte";
const props = {
  title: 'Toggle'
}
</script>

<main>
  <Button title={props.title} />
</main>

```
`text={title} ` เรียกว่าการ pass props ผ่าน Object


#### pass props ผ่าน Spread props
```javascript
/** App.svelte */

<script>
import Button from "./Button.svelte";
const props = {
  title: 'Toggle',
  name: 'myName'
}
</script>

<main>
  <Button {...props} />
</main>

```
`{...props}` เรียกว่าการ pass props โดยการใช้ spread operator มาช่วย ในการ pass ค่า ผ่าน Object ฝั่ง child component จะได้ props ทั้งหมดในตัวแปร props

```javascript
/** Button.svelte */

<script>
export let title;
export let name;
</script>

<button {name}>
  {title}
</button>

```
เราสามารถรับค่า name เพิ่มได้จาก object props ที่ pass เข้ามา


#### access props ผ่าน $$props
```javascript
/** App.svelte */

<script>
import Button from "./Button.svelte";
const props = {
  title: 'Toggle',
  name: 'myName'
}
</script>

<main>
  <Button {...props} />
</main>

```

```javascript
/** Button.svelte */

<script>
let {title, name } = $$props
</script>

<button {name}>
  {title}
</button>

```
จากตัวอย่างก้านบนเราสามารถรับค่า title, name มาได้จาก $$props ซึ่งตัว $$props จะเก็บค่า props ที่มีการ pass มาไว้ทั้งหมด


```javascript
/** Button.svelte */

<button {$$props.name}>
  {$$props.title}
</button>

```
หรือจะใช้แบบนี้ก้ได้ ทำให้โค้ดสั้นลงอีกมาก เพียงเท่านี้เราก็สามารถรับค่า props มาใช้งานได้แล้ว ง่ายไหมครับ svelte


หากสนใจ svelte สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
[Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก](https://medium.com/@tanangular/svelte-framework-not-framework-%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-1-%E0%B9%81%E0%B8%A3%E0%B8%81%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81-434fde7ff97f)

ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ
Navigate Github repos as in VS code
Tags: github, vscode, javascript, react
Published: 2021-02-11 18:49:39

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j1e2yb1c01313xo7c3t7.png)
you can navigate  github repos just like in VS Code by adding *1s* in githubs domain name like www.github.com/some-repo will become www.github1s.com/some-repo

 [Source]("https://www.linkedin.com/feed/update/urn:li:activity:6765561696221179904/")
How I test for accessibility
Tags: a11y
Published: 2021-02-11 18:35:34

I wanted to share what my typical accessibility testing sessions look like. This is a quick over, but I hope you find it helpful (and if you haven't done so yet, check out some [accessibility quick wins](https://www.falldowngoboone.com/blog/accessibility-quick-wins/) I wrote about).

## What I typically do

- When I'm developing new UI, I inspect with browser dev tools, typically to confirm labels and semantic roles. I test on Chrome, Safari Technology Preview, and Firefox DeveloperEdition, but I probably lean the most on [Chrome DevTools accessibility tools](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference).
- Next, I'll run [axe-core](https://www.deque.com/axe/) and [Wave](https://wave.webaim.org) against the page. Automated accessibility tools like these only catch about [40% of accessibility bugs](https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage/), but they're a great way to find any low-hanging fruit before manual testing.
- If the feature I'm building requires user interaction (and it usually does), I will [test with a keyboard](https://webaim.org/techniques/keyboard/). The first thing I check is to see if I can navigate without a mouse. If I can't see what element has focus on the screen, that's an immediate fail. I next check if tab order is correct. Finally, I check user interactions (can I open and close widgets with just a keyboard, is there proper focus trapping, etc.).

## What I should do

- Test with users. We employ a third-party company that audits our code after we launch a new release, but I'd love to have them involved earlier on (preferably during the design iteration phase).
- Test on Windows (at least Chrome + NVDA). I have no excuse. I'm on a Mac, but I'm running Windows via VMWare Fusion, so I need to Just Do It.
- Test consistently on mobile. Chalk this up to convenience. Or inconvenience. It's next-to-impossible to inspect our developer environment outside of our work computers, so I'm relegated to testing on the Xcode Simulator. I'm hoping we'll make some changes soon that will open this up more, but for now, I'm stuck with our staging environment and a ridiculously long feedback loop.

I'm certain this list will continue to grow, but for now I hope it gives you a sense of where to start. If you have any questions or suggestions, I'm always up for a discussion on [Twitter](https://twitter.com/therealboone).

Until tomorrow!
Automatizando a instalação de software
Tags: powershell, tutorial, beginners, systems
Published: 2021-02-11 18:27:58

O processo de instalação de software no Windows tende ser algo muito simples, normalmente apenas ficar clicando em próximo até que se complete, mas será que temos uma forma de automatizar isso? 

A resposta é sim, seja para instalar de forma silenciosa como vamos debater aqui ou clicando nas opções, o que podemos conversar mais tarde sobre, só que utilizando Python. 

O processo de instalação silencioso depende muito do fabricante do instalador, já que é ele quem vai adicionar ou não o suporte, e principalmente a qualidade das informações e utilização. 

Caso o instalador seja um .MSI o processo vai ser bem mais simples, já que esse pacote é feito para facilitar esse processo, mas podemos também fazer com executáveis. Recomendo que para o que planeja utilizar, busque com o fabricante quais as opções necessárias. 

Como queremos escrever um script genérico de instalação, vamos abstrair um pouco esse processo. O processo basicamente, é verificar se o programa já existe, caso não, pegamos nosso instalador e executamos ele. 

Mas quais as informações que precisamos para fazer isso? 
Para organização, o nome do Software é muito importante. 
O caminho e nome do instalador também é algo bem importante, resolvi separar os dois, para o caso onde tenha uma pasta padrão de instaladores. 
Os parâmetros são a parte mais chata, já que eles variam conforme o fabricante. 
Por fim, para sabermos se o program já está instalado, vamos validar pela pasta onde normalmente fica instalado (sim, não é a melhor forma, mas no começo já é algo).

Tendo todas as informações, vamos ao processo: 
1. Copiar o instalador para uma pasta local
1. Executar o instalador com o parâmetro
1. Validar se o processo foi concluído ou não

Traduzindo para Powershell, temos:

{% gist https://gist.github.com/IGDEXE/d7d923c15fc1001fe1637f4e51e666aa %}

Como esse processo pode ser um pouco abstrato, vou deixar de exemplo como seria a instalação do Adobe Reader

{% gist https://gist.github.com/IGDEXE/c030b4b7445d525715a12c5e363d4ce8 %}

Alguns pontos de melhoria relevantes que podem ficar de lição de casa: 
1. Fazer o download do instalador do site do fabricante em vez de uma pasta num servidor
1. Validar de uma forma mais precisa se o programa está instalado
1. Adicionar LOGs na instalação, como verificar o tempo decorrido
Discord: Deleting Multiple Messages At Once
Tags: discord, a11y, tips
Published: 2021-02-11 18:21:08

Lately I had to remove several message at once on Discord, but I figured out how painful that was.

This is because I didn't know about this tip.

# 1. How To Delete A Message

I'm pretty sure you already know how to do delete a message, but let's think about it: to remove **a single message**, it requires you **3 clicks:**

![Step 1](https://dev-to-uploads.s3.amazonaws.com/i/guxi0nkfku7jepk6bco4.png)
![Step 2](https://dev-to-uploads.s3.amazonaws.com/i/i2hxsauqavwlpmrltpgb.png)
![Step 3](https://dev-to-uploads.s3.amazonaws.com/i/9949bjzqc8wq1ew1ewnw.png)

Now imagine that you want to delete dozens of messages (for instance, bot commands), then it can quickly get painful. 😓

# 2. The solution

There's a hack for **deleting multiple messages at once**, and this is: just hold your `Shift` key while hovering messages. Here's how the options panel will now look like:

![Options panel](https://dev-to-uploads.s3.amazonaws.com/i/r39iivcvn7b233hrgyji.png)

Now from here, you just have to click the **trash** icon for your message to be remove. You won't need to confirm the removal anymore: once you've click this button, your message is deleted. 🥳

# Conclusion

I hope this article was useful for you!

If so, don't hesitate to leave a ❤️ and to follow me. 🤗

{% post iamludal/you-are-using-emojis-the-wrong-way-i71 %}
Reordering Models - Building SaaS #80
Tags: python, django, views
Published: 2021-02-11 18:13:51

{% youtube owCJHnd5Oiw %}

In this episode, we looked at an UpdateView for the GradeLevel model in the homeschool application. Along the way, I had to display some UI elements on the grade to give users the ability to adjust the ordering of courses within their grade level.

We started by adding the icon link that I wanted to use to give users access to the edit page. Once the link was in place, I created the URL and copied an existing view as a starting point for the `UpdateView`.

As I got into the development of the `UpdateView`, I discovered that the template and the form already existed! I had the proper form for a pre-existing `CreateView`. All I had to add was a bit of context data to conditionally display "Add" vs. "Update" in the UI. I also added a "Cancel" button to the view that was missing before.

Once the view was in place, I wrote all the unit tests to prove that the code worked. I do this because it acts as my safety net for future changes.

The final change that I made was to display a table of courses that the user will be able to move each course up and down. I showed some other up and down movement views from course tasks rather than showing how to implement the movement views during the stream.
Best Github Repositories For Developers!! 
Published: 2021-02-11 17:55:39

**Note: This list is my personal reference You can also refer to this list**

### Web Developer Roadmap
{% github kamranahmedse/developer-roadmap %}
This repository gives brief descriptions, resources, and the roadmaps to become a developer whether it is Front end development, Back-end development, or DevOps Roadmap.
they also have a website: [roadmap.sh](https://roadmap.sh)
<br>
### 30 Seconds Of Code
{% github 30-seconds/30-seconds-of-code %}
This JavaScript Open Source snippet repository contains a wide variety of ES6 helper functions. It includes helpers for dealing with primitives, arrays, and objects, as well as algorithms, DOM manipulation functions, and Node.js utilities.
<br>
### Awesome For Beginners
{% github MunGell/awesome-for-beginners %}
This Repository contains numerous beginner-friendly projects for almost all programming languages.
<br>
### Tech Interview Handbook
{% github yangshun/tech-interview-handbook %} 
This repository contains the content to help you ace your next technical interview, with a focus on algorithms and some difficult but vital questions that could be asked in an interview.
<br>
### You Don't Know JS Yet
{% github getify/You-Dont-Know-JS %}
JavaScript is a fantabulous and in-demand programming language, there are countless free resources out there in other forms for JavaScript, but there are not so many resources in a form of an eBook thus, You Don't Know JS Yet by [getify](https://twitter.com/getify) is an amazing eBook to start with JS.
<br>
### Twitter Handles:
[@kamranahmedse](https://twitter.com/kamranahmedse)
[@30secondsofcode](https://twitter.com/30secondsofcode)
[@MunGell](https://twitter.com/MunGell)
[@yangshunz](https://twitter.com/yangshunz)
[@getify](https://twitter.com/getify)
[@github](https://twitter.com/github)

If you have any repositories for the DEVCommunity or me to check out, leave a link to them in the Discussion!

Don't forget to follow me on [Twitter](https://twitter.com/GarvitMotwani)!!
My Maven Archetype for Java Command Line Projects
Tags: java, maven, commandline
Published: 2021-02-11 17:47:28

*A window manager is a computer application that eases the use of multiple shell sessions at the same time.*  

In this post, I’ll show you can create Maven projects that spawn command line tools, so that your users can easily use them to run a Java CLI having complex argument parsing and management of dependencies.  

Everything is based on a real project, which provides a Maven archetype, ie, a template, to build your own CLI Maven projects, without the need to start from scratch every time.  

More, [here](https://marcobrandizi.info/my-maven-archetype-for-java-command-line-projects/)

*(image source, [Wikipedia](https://en.wikipedia.org/wiki/Allegory_of_the_cave))*
Parse and edit a BMP file with PHP
Published: 2021-02-11 17:46:47

I did not find any easy solution to open and parse a BMP file. For a personal project I had to perform this kind of operation, so I created a basic library, aggregating some tutorials and sources.

Let's start with the installation, classic:

`composer require ecourtial/php-bmp-parser`

Now we can easily open and parse the file. In the below example, I get the Red, Green, Blue and Hex value of the pixel located at x = 2, y = 0:

`$service = new BmpService();
$image = $service->getImage('myBmpFile.bmp');
echo $image->getPixel(2, 0)->getR();
echo $image->getPixel(2, 0)->getG();
echo $image->getPixel(2, 0)->getB();
echo $image->getPixel(2, 0)->getHex();`

This operation is quite simple, and does not require any third party library or PHP extension.

The library also allows basic editing, with some limitations though, and you will need this time the _gd_ PHP extension.

In the below example, I want to edit the file previously opened and save it with another name. I change the color of one pixel, extends the size of the image (new pixels are white by default) and finally edit some of the newly added pixels.

`$image->setPath('myNewBmpFile.bmp);
$image->getPixel(0, 1)->setR(0)->setG(0)->setB(126);
$image->setDimensions(3, 4);
$image->getPixel(0, 3)->setR(200)->setG(0)->setB(200);
$image->getPixel(1, 3)->setR(0)->setG(0)->setB(255);
$image = $service->update($image);`

Very basic, but does the job.
Como se tornar um Dev influencer com o mínimo de esforço
Published: 2021-02-11 17:44:23

1. Poste polêmicas no twitter periodicamente. Engajamento é o que você precisa.

2. Atenha-se a assuntos simples e rasos. Assim você vira uma figura de autoridade para iniciantes e fica longe do radar dos profissionais mais experientes, minimizando o risco de ser corrigido, e por fim mostrar que você não sabe tudo. Por exemplo, fale sobre novidades de tecnologias, afinal é basicamente ler o changelog

3. Regurgite discursos prontos de autoridades da nossa área como verdades absolutas, ao invés de guidelines que devem levar o contexto em consideração. Assim você supre a necessidade da maioria pela resposta fácil, afinal, pensar dá muito trabalho e tá todo mundo ocupado. 

4. Siga a moda e fale que o jeito famoso é o jeito certo, independente da situação. Monolito? ERRADO! Tem que botar microsserviços em tudo! Tua aplicação de 10 usuários precisa de NoSQL pra escalar!

5. Vincule sua marca pessoal a uma tecnologia, mas esteja pronto para pular pra próxima silenciosamente. Ao fazer a mudança, pareça que você já sabia tudo há tempos. Ninguém se interessa por quem está aprendendo, e sim por quem já sabe. Não se esqueça disso.

6. Pratique gatekeeping, utilizando qualquer critério arbitrário no qual você se inclua na parte privilegiada. Ex: “Quem não usa VIM nem programador é” - Assim cria-se um grupo no qual você faz parte, botando todo o resto pra baixo. Se der sorte, ainda arruma uma galera para te proteger dos seus detratores.

7. Use toda sua pompa e escreva sobre outros assuntos, afinal, todos sabemos que o desenvolvedor é capaz de falar com autoridade sobre qualquer tema, pois somos mais inteligentes que o resto do mundo. De política à saúde pública, nada escapa de seu intelecto implacável.

8. Abuse do viés do sobrevivente: Se funcionou pra você, funciona para todos.

9. Nunca fique tempo suficiente num emprego para lidar com as partes ruins de suas decisões, pois você só quer caso de sucesso para contar.

10. Fale mal do trabalho alheio, é o caminho mais fácil para você parecer fodão, além de botar medo em quem quiser te contrariar

11. Coloque tudo o que você faz ou fez na sua descrição em redes sociais, mesmo que você seja um bosta na maioria. Vale tudo, hobbies, trabalho, etc. Ex: "Esgrimista, CEO, Programador, Cozinheiro, Campeão regional de dominó"