teleren/devto huggingface dataset:
First React-Redux with Rails Web-App
Tags: react, rails, redux, webdev
Published: 2021-10-08 22:47:10

I'm recently realizing my joy for education and experiencing the glorious "ah-hah" moments. My career goal is to combine this joy with my developer skills. With this in consideration, I decided to build a prototype learning management software (LMS) as my first React-Redux with Rails project. The application would allow users (teachers) to enroll students in courses and then post assignments to those courses.

From my previous developer experiences, I learned the crucial importance of planning a project. Although I definitely find it most exciting and fascinating to swiftly begin coding and see a product dynamically appear on a web screen, I specifically focused more attention on the planning for this project.

My planning phase primarily included whiteboarding the user story, defining the model attributes and relationships, and generally exploring the design of the overall product. Once I had completed that, I eagerly began coding my project.

With React being my most recently developed skill, I figured I should start with the client side of the application and then eventually work on the server side. I followed the general project principle of first focusing on the low-hanging-fruit. I quickly learned that this may not always be the best tactic, especially if focusing on that low-hanging-fruit is simply so that you can avoid the tougher challenges.

As I continued working on the project, and naturally encountered challenges, I typically would spend some time working on a solution and if I wasn't able to find one, I would progress with another branch of the project and return to that challenge later. However, I would now highly advise against this approach, especially if you are unsure what the path will look like once you have found the solution to that challenge. There are so many dependencies in coding projects that it's best to fully know what you are depending on.

In the end, I often had to refactor some of my code to expect a different result from the original challenge than as I had initially assumed.

This definitely comes back to the importance of planning.

No matter how much planning you do, you will naturally encounter unexpected situations once you begin developing. Rather than avoiding those situations, I think it is best to tackle them head on and fully understand how it may effect your plan.

I no longer see planning as simply a phase that comes before coding/developing. It is more likely an ongoing exercise that starts before you begin any building and continues on until the end of the project. It is crucial to consistently reflect on how your current path compares to the planned one. It's absolutely tedious, but it will save so much time and headaches later on.

If you'd like to check out my app, below is the link to the GitHub repo. This is just the base of what is possible after 10 months of software developer experience.

https://github.com/sallyman128/mod4-final-project
Hacktoberfest 2021 🎃 Celebrate Open Source with Alpaca
Tags: hacktoberfest, programming
Published: 2021-10-08 22:18:37

October is for open-source celebrations and Alpaca is excited to participate! For the first time ever, we’re actively seeking Hacktoberfest contributions. Contribute to our open-source projects in the month of October and win cool Alpaca swag. 👕

What is Hacktoberfest?
Hacktoberfest is a month-long celebration of open source software hosted by DigitalOcean, and encourages worldwide participants to contribute to open-source projects hosted across GitHub.

Getting Started
Make sure you have an account, then register on the official site and start contributing to any participating open source project between Oct 1 - Oct 31. You must make at least four pull requests (PRs) in the month of October in any GitHub-hosted repository/project with the hacktoberfest label in order to qualify. To make sure that your pull request is valid, please adhere to Hacktoberfest's quality standard.

Earn Hacktoberfest and Alpaca Swag
The first 50,000 participants who meet the contribution criteria set by DigitalOcean receive a Hacktoberfest T-shirt.

In addition, if you’re one of the first 20 participants to submit one or more successfully merged pull requests to our open source projects, you’ll receive an Alpaca T-shirt. 🦙 


Why Contribute to Alpaca’s Open Source Projects?
Alpaca is a fast-growing fintech company that is democratizing global access to financial markets with a developer-friendly stock and crypto trading API.

By contributing to Alpaca's open source projects, you’re helping the entire community become more efficient and productive and empowering developers worldwide to build fintech apps. 

Here’s a list of our Hacktoberfest-eligible repositories:

https://github.com/alpacahq/alpaca-trade-api-go

https://github.com/alpacahq/alpaca-trade-api-csharp 

https://github.com/alpacahq/alpaca-trade-api-python

https://github.com/alpacahq/alpaca-trade-api-js

https://github.com/alpacahq/marketstore


We hope you have fun contributing to and celebrating open source this month!
Working with Remote Branches
Published: 2021-10-08 22:18:19

This week on my Open Source journey, I attempted to add support for JSON formatted configuration files for an [open source Static Site Generator](https://github.com/Yoda-Canada/Magic-SSG) (SSG). The owner of the repo, Tengzhen, also contributed the same feature to my SSG, [Silkie](https://github.com/oliver-pham/silkie). However, I made a step forward by testing his code from a tracking branch before merging it.

## What I was working on
Like any time when I work on someone else's repo, I forked their original repo and made any changes on its clone. However, I decided to make a draft Pull Request (PR) this time so that Tengzhen can give me some feedback on my progress. Thanks to his clean and well-structured codebase, I managed to integrate the feature by adding a [new flag](https://github.com/Yoda-Canada/Magic-SSG/blob/8f4d10c9db253db0061a907cda974e4c9e82d28b/magic_ssg.py#L164) and [a small block of code](https://github.com/Yoda-Canada/Magic-SSG/blob/8f4d10c9db253db0061a907cda974e4c9e82d28b/magic_ssg.py#L168-L185). [My PR](https://github.com/Yoda-Canada/Magic-SSG/pull/13) finally got merged into his `main` branch.

## Review & test the PR
As for Tengzhen, he also made a [draft PR](https://github.com/oliver-pham/silkie/pull/17). To help him out with it, I "fetched" his remote branch (using `git fetch`) to my local machine and tested his code. Although it was a totally new concept for me, setting up a tracking branch was pretty straightforward.

I noticed a few bugs in Tengzhen's code, attempted to fix them, and commented about my recommendations on GitHub. He gladly modified his code and pushed the changes, which were finally merged into my `main` branch.

## Conclusion
I have been wondering how I can test code on a remote branch before merging them. Setting up a CI/CD pipeline would be a complicated and time-consuming task, which is what I'm trying to avoid right now. Luckily, Git enables me to create a tracking branch in my local repo with ease and merge it once it's ready.
React Library Suggestions
Tags: react, webdev, design, beginners
Published: 2021-10-08 22:07:38

This is a quick introduction to my 3 suggest React Libraries that I think you should try out. Let's dive in. 

##1. Material UI
![Material UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogu1fs4cyt4b4lww9dis.png)

Material UI is one of the most popular UI packages in React and is created by Google. It was created to bring unified user experience across various devices and platforms. Material UI also has the option to use web design templates! 

####To install: 
```
npm install @material-ui/core
```
####Next import the component that you want to use: 
```
import Button from '@material-ui/core/Button'
```

##2. Redux
![Redux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9bicx5dgxj9nx22eyej.png)
 
Redux is a global state management solution. It allows you to connect every React component directly to the entire state, eliminating the need to use props or callbacks. 

####To install: 
```
npm install react-redux
```

##3. React Bootstrap
![React Bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ratu1lhkch0k0qzxf1o.png)

React Bootstrap allows React components to be build with the popular CSS framework, Bootstrap. 
####To install:
```
npm install react-bootstrap
```
####Next import the component that you want to use: 
```
import Button from 'react-bootstrap/Button'
```

Happy coding!
Day 469 : The Bug
Tags: hiphop, code, coding, lifelongdev
Published: 2021-10-08 22:04:39

_liner notes_:
- Professional : Whew, what a day! I thought it was going to be smooth sailing into the weekend. Nope. haha Helped some folks with an issue they were running into. Then I ran into an issue with when someone what reviewing the blog post I submitted. I thought I had worked out the setup script fully, but I guess not and then I ran into a bunch of problems getting it working. Basically took up my day. I just have one random issue now. Sent a message out to the back-end team to see what's up.

- Personal : So last night, I think I finally got a handle of what is happening the range switch thing I'm making for my side project. Going to start working on the pages of the app. Thinking I'm going to combine a couple of pages now that I think about it. I did get a chance to watch an episode of "Boruto". Also fixed the bug with my website's portfolio section, it was a small visual thing, but I feel much better about it. haha.

![Grey stoney mountain face in Val Gardena, Italy at sunset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6de37g511s2bzulq9rgj.jpg)

Looks like it's going to storm! Going to eat dinner and watch "Boruto" and then work on putting together the radio show for tomorrow. It's Indigenous People's day on Monday, so it's a long weekend. Looking forward to relaxing and using some time to get ahead on some projects.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube eN9k6Dz1SX0 %}
Is there a better way to get a document icon image in React apart from this lunacy?
Tags: typescript, react
Published: 2021-10-08 21:54:25

So I have a Fluent UI DetailsList component in a React SPFx web part and I get it to display the icon through this awful code...

```constructor(props) {    
    super(props); 
    const columns: IColumn[] = [
      {
        key: 'column1',
        name: 'File Type',
        //className: classNames.fileIconCell,
        //iconClassName: classNames.fileIconHeaderIcon,
        ariaLabel: 'Column operations for File type, Press to sort on File type',
        iconName: 'Page',
        isIconOnly: true,
        fieldName: 'name',
        minWidth: 16,
        maxWidth: 16,
        onColumnClick: this._onColumnClick,
        onRender: (item: IDocument) => {
          //return <img src={item.iconName} className={classNames.fileIconImg} alt={item.fileType + ' file icon'} />;
          return <img src={'https://modernb.akamai.odsp.cdn.office.net/files/fabric-cdn-prod_20210703.001/assets/item-types/20/' + item.DocIcon + '.svg'} alt={item.DocIcon + ' file icon'} width='20' height='20' />;
        },
      },
If you're not using linux...
Tags: linux, opensource, systems
Published: 2021-10-08 21:40:31

> I've recently made a new post regarding a guide on distros!
> https://dev.to/rainedev/linux-distributions-a-short-recommendation-guide-3498

Then, what *are* you doing?
Linux is the best, switch now.

---

But for real, Linux is open source, there is no telemetry, You can customize it to what you want it to be, it's lightweight and honestly it's just epic.

You can install it in 15~30 minutes and then you can enjoy your free and open source software!

---
**The (basic) distro's**
These distro's are great for beginners.
[Elementary OS](https://elementary.io) (Mac like)
[Zorin OS](https://zorin.com) (Windows-y)
[Solus OS](https://getsol.us) (Also Windows-y)
[Ubuntu](https://ubuntu.com) (Mac/Windows 11-y)
[Manjaro](https://manjaro.org) (Arch-based and in many flavours.)

**"Hands on" distro's**
These distro's are great for doing it all yourself.
[Arch](https://archlinux.org) (What I use.)
[Gentoo](https://www.gentoo.org) (*Very* hands on)
[Void](https://voidlinux.org) (in musl version and glibc version)
[kiss](https://kisslinux.org) (super sexy distro)

**GOD TIER**
you're crazy to use this lmao
[LFS](https://linuxfromscratch.org) (absolutely your distro, very hard)
Working with git remote - approving new feature
Tags: opensource, osd600, javascript
Published: 2021-10-08 21:29:26

## The new feature
This week, I decided to work with Luke to implement the new feature of adding [support for config file](https://github.com/mqnguyen5/mini-ssg/issues/12) to his [SSG tool](https://github.com/mqnguyen5/mini-ssg). The implementation didn't take much time since his code is very clear and doesn't have any major bugs to worry about.
With the new feature, the tool now accepts config JSON file when option `--config` is used. This option will read the config file and generate HTML files based on the options provided within the file, and ignore all other options passed in from the command line. After some modifications, he agreed to merge [my pull request](https://github.com/mqnguyen5/mini-ssg/pull/13)

Luke also implemented the same [feature](https://github.com/minhhang107/mh-ssg/issues/10) for my project. His code in general was good but I suggested some changes including separating modules and combining functions to remove code duplicates.

## Git remote
When Luke sent [his pull request](https://github.com/minhhang107/mh-ssg/pull/11), in order to test his code, I needed to get his code to my local machine so this was the right time for me to learn about `git remote`.
First I had to `git fetch` his fork and then create a tracking branch to keep track of his work. After he updated his pull request, I had to `git pull` the code from his working branch to my tracking branch again to test the revised version.

## Final thoughts
`git remote` is actually  a bit tricky for me when I started so I had to watch some tutorials for better visualization and tried it out a few times to make sure that it works the way it's supposed to be.
Django Cloud Task Queue
Tags: django, googlecloud, python, queue
Published: 2021-10-08 21:15:01

I’m developing and maintaining a Python [package](https://github.com/txiocoder/dj-cloud-task) to easily integrate your Django Application with Google Cloud Task.

Some features:

* Easily push tasks to Cloud Task using a decorator
* Automatically route all tasks from a single endpoint
* Ease scheduling with native python datetime
* Named task to avoid duplicated
* Local development support with Redis Queue

Simple and beautiful task definition

```python
from datetime import timedelta
from django.utils.timezone import now
from cloudtask import (
    CloudTaskRequest,
    task)

@task(queue='default')
def add(request: CloudTaskRequest, a: int = 5, b: int = 4) -> None:
    print(f'Running task with args {a=} and {b=}')
    print(a + b)

# pushing task to queue
add(a=2, b=4).delay()

# executing the task immediately without push to queue
add(a=30)()

# scheduling the task
at = now() + timedelta(days=1)
add(b=15).schedule(at=at)
```

See the [repository](https://github.com/txiocoder/dj-cloud-task) and full documentation on my [Github page](https://github.com/txiocoder/dj-cloud-task).

Thanks to the project [bazaar](https://bazaar.ao).

----------

If it was helpful or if you found it interesting, also leave an 🙋🏽‍♂️❤️ in the comments. Thank you, looking forward to the next article. Enjoy and follow my work.

- See [Here](https://linktr.ee/txiocoder), all my resources.
- Learn With Me on [Youtube](https://www.youtube.com/channel/UCETQfLH1W0V1EBwp4iMOF6w).
- Follow Me on [Instagram](https://www.instagram.com/txiocoder/) to stay updated.

Thanks,
Stay safe!
Maven e suas funcionalidades
Tags: maven, beginners
Published: 2021-10-08 20:48:55

## O que é o Maven?

O Apache Maven é uma excelente ferramenta de apoio a qualquer equipe que trabalhe com projetos Java (outras tecnologias também são suportadas), fornecendo aos desenvolvedores uma forma de automatizar e padronizar a construção e publicação de suas aplicações. (fonte: [DevMedia](https://www.devmedia.com.br/introducao-ao-maven/25128))

- ´groupId´ ➟ organização / compania
- ´artifactId´ ➟ o que está implementando 
- ´build´ ➟ onde adiciona os executáveis] 
- ´plugin´ ➟ no aem precisamos de um plug-in pra fazer o deploy dentro do AEM 
- ´bnd´ ➟ empacotador de bundles, transformar o .jar em uma estrutura de bundle OSGi 

 

**Lifecycle do Maven**

![Lifecycle do Maven](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krcpzhlysqka9eemgbcg.png)

**Ordem de execução**

1. Processa primeiro recursos (preparando os arquivos, fazendo as cópias para uma pasta específica) 
2. Compila as classes Java 
3. Processamento das classes 
4. Repete os três primeiros processos, mas com processamento focado nos testes. Ele compila e roda os testes. 
5. Empacotamento jar.

![Lifecycle do Maven II](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g86kzglhjodmehnuinma.png)

6. No integration test, roda-se os testes de integração. Como o pacote jar já estará criado ou até mesmo em execução, esse momento serve para executar testes de integração, como testes de workflow ou de performance. Isso só é possível porque outras funcionalidades já terão sido testadas no nível de teste superior. 
7. O Verify executa todos os passos até o dado momento e verifica se a compilação e o teste está apropriado. 
8. A Instalação acontece pegando o jar que foi compilado e guardando dentro da pasta .m2* e instalando localmente ou 
9. O Deploy (é paralelo ao deploy, não consecutivo) serve para instalar em um repositório remoto (Nexus – no maven central).

======= 

Em um projeto Maven, o esquema padrão de pastas é o seguinte:

![Pastas do Projeto Maven](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz0j9g42rzxcxcyog7h6.png)

Acessamos src e, dentro dele, temos as pastas main e test. Main compila e processa classes e test compila e processa testes. Ambos contam com arquivos java e properties. 

A pasta target é o destino de toda a compilação do maven. Tudo o que for feito é encaminhado para esta pasta. 

======= 

* .m2 é a pasta para instalação 

☆ Atenção: Install e Deploy não são executados ao mesmo tempo, são independentes e finais no ciclo de vida do Maven.
Nova ferramenta do Facebook para encontrar falhas de segurança em apps Android
Tags: android, facebook, security
Published: 2021-10-08 20:43:00

Há alguns dias o Facebook liberou para o público uma ferramenta, até então caseira, para descobrir falhas de segurança e privacidade em aplicações Anndroid e Java. 

Batizada de Mariana Trench (MT) e distribuida de forma Open Source a ferramenta está em constante evolução e suporte pelo time de engenharia do Facebook. Ela é usada hoje em milhões de linhas de código no Whatsapp, Instagram e, claro, no próprio app do Facebook. Segundo o Facebook, na primeira metade de 2021, 50% das vulnerabilidades encontradas foram de forma automatizada.

O MT foi desenvolvido em Python e roda de forma estática no código. Está disponível (aqui)[https://github.com/facebook/mariana-trench/). O Facebook também deixou pronto um tutorial para facilitar nos primeiros passos. O tutorial pode ser acessado (aqui)[https://mariana-tren.ch/docs/getting-started/].
Como usar o Google americano (pesquisa em inglês)
Tags: tutorial, beginners, braziliandevs
Published: 2021-10-08 20:38:52

#### Altere sua busca para qualquer região.
----
Quando fazemos uma pesquisa em outro idioma, a maioria dos resultados que recebemos são em português e relacionados com o nosso país. Entretanto, nós queremos, por exemplo, resultados em inglês e relacionados com os EUA. Como fazer isso?

Para fazer pesquisas em outros idiomas e/ou acessar o Google de determinado país, basta alterar a sua região nas configurações do próprio Google. Isso pode ser feito em qualquer navegador de internet.

### Siga os passos abaixo:

1. No canto inferior direito, clique em 'Configurações' e, em seguida, em 'Configurações de Pesquisa'.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3s01ve20d4ykt76ojya.jpg)
2. Em 'Resultados da pesquisa', role para baixo da página, encontre 'Configurações de região', selecione o país desejado e salve.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a98dusys8sb2xcf26j9r.png)

----

## Considere seguir este perfil para mais postagens como essa!
Outros conteúdos:
* [Python Typing](https://dev.to/mrslima/python-typing-kl4)
UI Dev Newsletter #77
Published: 2021-10-08 20:29:03

## Links


[One last time: custom styling radio buttons and checkboxes](https://bit.ly/3A5bwiv)
Scott O’Hara explains what is necessary to restyle radios and checkboxes directly.


[Defining Basic JavaScript Terms: map, filter, and reduce](https://bit.ly/2ZU8Mbz)
Jim Nielsen explains why APIs methods map, filter, and reduce are named the way they are in JavaScript language.


[Bringing instant page-loads to the browser through speculative prerendering](https://bit.ly/3D5Zk39)
Leena Sohoni and Addy Osmani write about speculative prerendering in the browser and how to participate in the Chrome origin trial.


[Explore JavaScript Dependencies With Lighthouse Treemap](https://bit.ly/3iq2eI7)
Sia Karamalegos explains how to inspect all JavaScript downloaded and used/unused for a site in a handy data visualization with Lighthouse Treemap.


[10 GitHub Repository every Web Developer should Know](https://bit.ly/3orDCCF)
Muthu Annamalai Venkatachalam puts together a list of ten GitHub repositories to help you grow as a developer.


[So many little design helper sites!](https://bit.ly/3FioQ6W)
Chris Coyier shares a few sites with handy little tools like wave generators and more.


[Boring SEO](https://bit.ly/2YkuJ2U)
An SEO guide for non-lazy people.


[ct.css](https://bit.ly/3DcglZE)
Harry Roberts shares a diagnostic CSS snippet that exposes potential performance issues in your page’s head tags.


## Self-promotion

[How To Build An Expandable Accessible Gallery](https://bit.ly/3uHU1Ur)
Smashing Magazine published my article in which you could learn how to set up a gallery that is expandable as well as accessible.

## Popular on Twitter

[HTML tips you won't see in most tutorials.](https://bit.ly/3BayLZQ)
Marko Denic shares a thread featuring some less-known yet beneficial HTML attributes and elements.

## Hacktoberfest

[A Hacktoberfest Project For All Web Developers: Style Stage](https://bit.ly/3FiRPb8)
Stephanie Eckles explains why the Style Stage is a perfect project for Hacktoberfest.

## Just for fun

[Misquoting Einstein Is Fast And Stupid, But Not Accurate](https://bit.ly/3Dcglc6)
Tarah Wheeler went looking for the origin of a famous quote believed to belong to Albert Einstein.


**Happy coding!**

[Subscribe to the newsletter here!](https://buttondown.email/starbist)