teleren/devto huggingface dataset:
My App 
Published: 2021-12-13 20:07:48

**Introducing Easy Algorithm**
Something I would love to make is an app that helps people to create simple algorithms to automate their tasks. I used to work for a financial company and some of the tasks I was given as a client service associate were so tedious for no reason. In my technical mind, I always thought how fast the computer could do all of this busy work with a simple algorithm being applied. 

**Who is it For?**
In my case, this app would be primarily for assistants, or anyone, who handles a lot of clerical work. If it could be given to an intern to do, it can be automated with a simple algorithm. This app would have a simple UI that would allow the user to give instructions to the app in pseudocode and it would generate the automation algorithm. 

**If Money & Time were No Concern, What Would I do With My Life?**
This question could be answered in three parts. There are three things I have great interests in, one being if time was not a concern and the other two money.

**If Time was Not a Concern**
If time was not a concern I would 100% become an Astronaut. I am obsessed with outer-space. My first job I was shooting for was an Astronomer, until I found out physics is pretty boring. I've never really found learning particularly as a hobby, but learning about space is genuinely something I seek out and find interesting. When the space launches happen and hours of livestream footage come out, I actually will sit there and watch the whole thing. I also think I could learn some really cool space important tech things if I pursued the career. However, it takes something like 14 years to become an Astronaut so it is not realistic in my life plan. 

**If Money was Not a Concern**
My first thing I would do if money was not a concern is work for the government. Not saying you can't make money for the government, but you would have to work your way up to start making the money you could make working for private companies. My dream job in this case would be to work for either the CIA doing counterterrorism intelligence collection or FBI on a JTTF (joint terrorism task force). My passion for counterterrorism is what led me to pursuing information security in the first place and I hope I do get to pursue it at some point in my life.  

My second thing I would do if money was not a concern is become an event planner. Planning things is literally my biggest hobby. I often sit and plan vacations and parties for hours that are not actually happening. I think it is super fun and I think I have pretty good ideas if I do say so myself.
Web Component Progress
Published: 2021-12-13 19:47:36

**What We've Done So Far**
So far at this point in our button development, we got our project to have the basic "bones" that it needs to have. It has the button, it has some text, it can be clicked, and it is linked to a Youtube video. We have considered design implementations we would like to make, but have not done them yet based on time and slow progress.

**Difficulties**
We have definitely run into some difficulties while working on our button. Design is a major one. Somethings that I would like to do I can't quite figure out how to do right. For example, I found and installed a cool font to use but can't figure out how to get it on my web component. We also are having a little bit of trouble implementing the icon and scaling the button screen. We would get extra credit for using a sound, but again we are having trouble implementing that and probably won't end up using one. 

**Things I've Connected With**
I personally have been having a lot of trouble in the class, and I have finally realized at this stage that it is because I do not know the git commands that well. I'm starting to connect with those and realize that the project will work a lot smoother the quicker I become comfortable with using git commands in my terminal.

**Our Progress:**
[https://github.com/ist402groupj/CTA-Button/tree/main/j-btn]
What to do when you don’t know what to do
Tags: productivity, career, motivation, discuss
Published: 2021-12-13 19:42:26

Hey there,

Do you ever feel like you have all of the things to do… and they’re all pretty important, and they all need to be done… but, you can’t figure out which one to do first, so you do exactly... none of them?

Yeahhh, analysis paralysis is real.

We all know that setting priorities is important to keep the ball moving on projects, but sometimes it feels impossible to figure out what we should be doing first.

How do you actually work out what’s a priority in the first place, when dozens of different things are screaming out for attention.

The Eisenhower Matrix is a good place to start.

This is a decision-making tool that was created by the 34th U.S. president Dwight Eisenhower.

How it works is, you divide a piece of paper into 4 quadrants — urgent and important, urgent and not important, important but not urgent, and not urgent and not important ([if you’re feeling lost check this diagram out](https://images.edrawsoft.com/articles/eisenhower-matrix/eisenhower-matrix-example.png)).

The things that are urgent and important — that’s your top priority, and the things you should do first.

Urgent but not important — That’s the stuff that needs to get done straight away, but not necessarily by you… so delegate if you can.

Important but not urgent — these are things you can plan to do in the future.

And, not urgent and not important — you just found out what you’ve been wasting your time on.

This method can help you finally sort out your priorities, delegate tasks and overcome the analysis paralysis that we often face with our work.
Your NextJS + Styled-Components + Darkmode quick-starter
Tags: webdev, beginners, react, showdev
Published: 2021-12-13 19:39:33

## Hey devs 👋

This past weekend, I decided to make a little quick-starter for all my NextJS and Styled-components based projects.

It was a little annoying to bring up the docs for each tool to implement because I can never remember all the setup and configurations 😅

So, if you're a react dev tinkering with NextJS, you can use my starter to bootstrap your next app!

It has the bare minimum including a:
functioning Navbar, Mobile Nav, example component, react-icons library, and darkmode! That's it. 
Please customize to your needing! If you understand React, basic CSS and :root variables, you'll find yourself editing and navigating through the files very easily. It also features the easiest Darkmode you've ever experienced! 

---

## Resources 

1. [DEMO](https://next-styled-components-darkmode-quickstarter.vercel.app/)
2. [REPO](https://github.com/chansen17/next-styled-components-darkmode-quickstarter)
3. [NextJS](https://nextjs.org/)
4. [Styled-components](https://styled-components.com/)
5. [Next-theme](https://www.npmjs.com/package/next-themes)

---

## Getting started

As always, after cloning the [repo](https://github.com/chansen17/next-styled-components-darkmode-quickstarter), to get started simply run `npm install` , and in the case of a NextJS app, you're going to run `npm run dev` to start the development process. 

That's it 💯 

If your familiar with create-react-app, the `pages` folder is like your `src` folder. Inside you'll find the `index.js` file, which is like your `App.js` file in a create-react-app project. You'll also find `_app.js` which is like your `index.js` file in create-react-app. 

--- 

## Conclusion 

That wraps up Your NextJS + Styled-Components + Darkmode quick-starter! I hope you can make use of this quick-starter. NextJS is seriously cool, styled-components makes CSS even more fun, and darkmode doesn't have to be such a drag with next-theme! Have fun! 

--- 

## Have questions

Running into problems or have any questions!? Hit me up on [Twitter!](https://www.twitter.com/hyggedev)

--- 

## You may also like

{% link https://dev.to/hyggedev/how-to-stay-focused-as-a-self-taught-frontend-web-developer-7gp %}

{% link https://dev.to/hyggedev/master-frontend-development-by-cloning-these-websites-1m08 %}

{% link https://dev.to/hyggedev/great-beginner-friendly-api-s-to-start-practicing-frontend-development-52kl %}

{% link https://dev.to/hyggedev/how-to-build-a-responsive-react-navigation-menu-with-styled-components-3682 %}

{% link https://dev.to/hyggedev/no-fuss-dark-mode-toggle-with-react-styled-components-3nd4 %}
Boilerplates 
Published: 2021-12-13 19:35:43

This week we looked into the boilerplates for the Angular, React, VueJS, and StencilJS frameworks. 

**Commonalities between boilerplate code:**
Upon looking at the boilerplates for each framework, commonalities could be found. A major common finding was the languages used in each boilerplate: all had JavaScript, and most appeared to have CSS and HTML. Another common finding was how the files were created and formatted in the boilerplates.

**Duplicate / Overlapping**
Duplicates and overlapping code is definitely a theme within these boilerplates. Since all of this code is open source, it is not surprising to see. If it works, why not implement it?

**Easiest DX to get going (My Opinion)**
I think that React is the easiest DX to get going. React primarily uses JavaScript, which I personally am the most versed in out of all programming languages. So if I was to build an application tomorrow, that is what I would use. React also seems to have more information on it when you do some research compared to the other frameworks. 

[https://github.com/ist402groupj]
[https://github.com/react-boilerplate/react-boilerplate]
MongoDB Atlas Hackathon Help Thread
Tags: atlashackathon, mongodb, help
Published: 2021-12-13 19:22:18

---
title: MongoDB Atlas Hackathon Help Thread
published: true
description: Comment here if you need any help during the MongoDB Atlas Hackathon!
tags: atlashackathon, mongodb, help 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e94jh44aumpmy778e65g.png
---

**If you're participating in the [MongoDB Atlas Hackathon](https://dev.to/devteam/announcing-the-mongodb-atlas-hackathon-on-dev-4b6m) and you need some help with your submission, welcome! You are in the right place and we're excited to help.**

If you have any questions about how this contest works (_ex: due dates, how to post your submission, picking a category, etc._) the DEV team will be happy to assist you.

If you are running into issues or get stuck when it comes to using MongoDB, we will surface all technical questions for the MongoDB team and answer here on their behalf!

> ## Please comment below if you need asynchronous assistance with the MongoDB Atlas Hackathon ❤️ 

_P.S. If you'd like to share an update on the progress you're making on your project or if you'd like to connect with other participants, please do so in the [community update thread](https://dev.to/devteam/share-your-mongodb-atlas-hackathon-updates-5g4k)!_
Breaking Changes tl;dr 2: “The ACCESS Act of 2021, Part 1”
Tags: podcast, news, api
Published: 2021-12-13 19:16:59

{% spotify spotify:episode:5P5GqNZNdzX0cfQRd2sVQB %}

In this Breaking Changes tl;dr mini-episode, Postman Chief Evangelist Kin Lane welcomes Keir to discuss the Augmenting Compatibility and Competition by Enabling Service Switching (ACCESS) Act of 2021 moving through the United States Congress.

**Host:** Kin Lane, Chief Evangelist at Postman ([Linkedin](https://www.linkedin.com/in/kinlane/), [Twitter](https://twitter.com/kinlane))

**Speaker:**: Keir Lamont, Policy Counsel at CCIA ([Linkedin](https://www.linkedin.com/in/keir-lamont-9992ab23/), [Twitter](https://twitter.com/keir_lamont?lang=en))

Keir Lamont is a Policy Counsel at the Computer & Communications Industry Association (CCIA) where he focuses on issues related to privacy, security, and emerging technology. Prior to joining CCIA, Keir managed the Program on Data and Governance at The Ohio State University Moritz College of Law. 

You can subscribe to Breaking Changes to get episode notifications and listen right in your feed — or subscribe on your platform of choice! 

You can listen to every Breaking Changes tl;dr episode on these podcast platforms:



- 
[Youtube ](https://www.youtube.com/playlist?list=PLM-7VG-sgbtA5ywMlGAYlPo_PYy6vdJ4O)

- 
[Spotify](https://open.spotify.com/show/5ig80ZlBLiC2iXxql0s1q2)

- 
[Apple Podcasts](https://podcasts.apple.com/us/podcast/breaking-changes/id1574147652) 

- 
[Google Podcast](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkLnBvZGJlYW4uY29tL2JyZWFraW5nY2hhbmdlcy9mZWVkLnhtbA==)

- 
[Amazon Music ](https://music.amazon.com/podcasts/ea40d8b4-8cbb-4061-b618-794c3bbbbd42/breaking-changes)

- 
[RSS Feed](https://www.google.com/url?q=https://feed.podbean.com/breakingchanges/feed.xml&sa=D&source=docs&ust=1638470528888000&usg=AOvVaw0el4gQ5fXUW4tCFuvVOxQL)

Happy listening! 

Watch the full episode here:

{% youtube QloDbTt_WbQ %}

PS: We’re new here and excited to be part of the community.  Hit ⭐️ or show :heart: if you like an episode and leave your thoughts in the comments below.
DRY - Não se repita.
Tags: developer, estude, software, principle
Published: 2021-12-13 19:05:37

## O que é DRY?

O DRY(Don't repeat yourself) é um princípio que fala basicamente sobre não se repetir, como assim? Quando ele fala de não se repetir, ele se refere a duplicidade de tarefas, funções, requisitos de negócios, no desenvolvimento de código e na documentação de software. 

Sabemos que às vezes acabamos repetindo algo no desenvolvimento sem a gente perceber, entretanto, é um dos motivos para fazermos também a revisão de código, por exemplo, não só para ver se o código ta funcional, utilizando boas práticas, como também se tem duplicidade nele, sem a duplicidade, acabamos evitando problemas com manutenção do código, diminuição na quantidade de bugs e melhoria no desempenho da aplicação.

![DRY](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkxc3xf3n9iz1rvmhdx4.jpg)

Um dos exemplos bem simples que podemos utilizar é o desenvolvimento de uma API, nela temos tanto envio quanto recebimento de dados em json, logo, precisamos validar, tratar aquele json que recebemos e o que enviamos, pense nisso se fossemos fazer isso para cada requisição. Então, sabe como resolver? Quais formas tem?

Uma das formas é criar uma função genérica para fazer a validação e o tratamento do json para que ele não se repita em toda requisição a mesma coisa, ou, instalando uma lib que já faça isso. 

## Experiências com o DRY

Já utilizei o **DRY(Don't repeat yourself)** diversas vezes, em desenvolvimento de APIs, Websites, sistemas, jogos e até na área de designer. Uma das formas que usei foi tanto criando funções genéricas quanto desenvolvendo uma lib para tal ação.

Este foi o <b>diário de bordo #12</b>. Seguindo a sequência do que meu amigo @figur8 me apresentou semana passada, 3 novos princípios o **YAGNI**, **KISS** e **DRY**, hoje eu escolhi falar sobre o **DRY** na próxima semana irei trazer sobre o **Big'O** galera, vlw. Vamos nos despedindo por aqui. Voltaremos com mais um diário de bordo.

<p align="center">
  <a href="#">
    <img src="https://cdn.dribbble.com/users/1889486/screenshots/5081642/thankyou_.gif" width="500">
  </a>
</p>

<b>Este artigo foi útil para você?</b> 
<b>Deixe um comentário abaixo.</b>

## Referências 

* [YAGNI, KISS E DRY](https://www.linkapi.solutions/blog/yagni-kiss-e-dry)
Exploring React's new web component support
Tags: react, webdev, javascript
Published: 2021-12-13 18:57:06

---
title: Exploring React's new web component support
published: true
description: React recently added experimental support for web components. Let's take a look at how they work. 
tags: react, webdev, javascript
//cover_image: https://direct_url_to_image.jpg
---

Last week, React landed a long-awaited feature in the `@experimental` branch: [support for custom element attributes and properties](https://github.com/facebook/react/issues/11347#issuecomment-988970952). Let's take a look at what that means and why I'm excited about it. 

## Why web components?
[Web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are a collection of web standards that let developers build UI components that work in any framework by defining their own custom HTML elements. 

If you only use React, this means you get access to new quality components, like [Vaadin components](https://vaadin.com/docs/latest/ds/components), without having to use any workarounds. 

If you're in an organization that uses different frameworks across projects, the support for web components means you can more easily use the same set of components in all projects instead of having to reinvent the wheel (or date picker) in each project. They're a great foundation for design systems.  

## How does it work?
Start by installing the `@experimental` version of `react` and `react-dom`

```bash
npm i react@experimental react-dom@experimental
```

Then, install a web component that you want to use:

```bash
npm i @vaadin/vaadin-date-picker
```

Import the web component using a normal import statement:

```js
import "@vaadin/vaadin-date-picker";
```

You can then use it in your JSX, binding events and properties like with any other component. Note how the component name uses dashes instead of camel case. 

```jsx
return (
  <vaadin-date-picker
    label="When were you born?"
    i18n={localizedStrings}
    onChange={handleChange}
  />
);
```

Here's a running example you can try out:
{% codesandbox shy-tdd-8b4tq %}

## What doesn't work (yet)?
There are still some outstanding issues with custom HTML element support. For instance, `onChange` event handlers do not work properly ([issue](https://github.com/facebook/react/issues/22888)). 

Using web components with TypeScript is also still challenging as the type definitions haven't been updated yet. 

## When is it getting released?

Official web component support in React may be released as soon as React 18 if the team gets enough feedback to be confident in releasing it. Otherwise, the release may be pushed back to 19. 

If you're interested in seeing web component support in React 18, please try it out and report any issues to the React team on GitHub https://github.com/facebook/react/issues.

## Full-stack demo app
Here's a full-stack Spring Boot + React app here if you want to give it a try: https://github.com/marcushellberg/fusion-reactor

![React and web components app with data grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi8joyfa3nickut15u35.jpg)
When should I use asynchronous code in JavaScript?
Tags: javascript, webdev
Published: 2021-12-13 16:32:17

If you were learning JavaScript for some time, I'm sure that you've heard about asynchronous code. Promises, callbacks, the `async` and `await` keywords, etc. But a question that often gets unanswered is, when should I even use asynchronicity?

The short answer is: **only if you have to use a function that is already asynchronous and you need the return value of that function.** 

For example, imagine that we have to create a function that receives the number of a Pokémon and returns its name, e.g. if you pass the number 25, it returns "Pikachu".

In this function, we'll call the [PokéAPI](https://pokeapi.co/) using the native [`fetch` function](https://developer.mozilla.org/en-US/docs/Web/API/fetch).

The thing is, `fetch` is an asynchronous function. And we need what this function returns because it's the response from the API. It means that the function we create should be asynchronous.

```javascript
"use strict"; // Enable strict mode

async function getPokemonName(pokemonNumber) {
    let pokeApiResponse = await fetch(
        `https://pokeapi.co/api/v2/pokemon/${pokemonNumber}`
    );
    pokeApiResponse = await pokeApiResponse.json();

    return pokeApiResponse.name;
}

const pokemon25 = await getPokemonName(25);
console.log(`Pokémon #25 is ${pokemon25}`);
// 👆 Prints "Pokémon #25 is pikachu"
```

**In some cases, however, you can choose whether to use synchronous or asynchronous functions** to perform the same task. This often happens in Node.js, where you can read and write files using synchronous functions or asynchronous ones. Which ones should I use?

If you're creating the back end of a website using Node.js (or Deno) or you're working on the front end, you should definitely use the async versions.

**Synchronous tasks block everything else.** It means that, if a task takes a lot of time in Node, other people won't be able to enter the website until that task finished. On the front end, the site will freeze while a synchronous task runs. That's why async works better in those cases.

---

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter
Trading-Card Web Component
Tags: devjournal, webcomponents
Published: 2021-12-13 18:38:29

[NPM](https://www.npmjs.com/package/@ist402group19j/trading-card) and [GitHub](https://github.com/ist402groupj/project-3)

**Tutorial**
To create the trading card element I started with a very basic border outline to create the “edge” for the card. I used the CSS border property to create the outline by styling the div element that contains the entire card. After the outline I started to work on the alignment of the elements within the card, and the background colors. We chose to include the name at the top, then the image, and additional details below the image. In addition to alignment and coloring, I started to work on the card content and filling in the details to the proper areas on the card face.

We started working as a group on the visual design of the card and the color contrasting features. We chose a holiday theme for the trading card project and made 4 cards to display Santa, Mrs. Claus, The Grinch and Buddy the Elf. Our team then worked on the optional icon support by including the simple-icons library in our project. We then took a short break from code development to get a head start on the storybook features, but encountered some challenges in the initial setup with the page continuously loading. Next steps in development included mapping the key values for each card, and separating each card into its own unique element in the demo. 

`updated(changedProperties) { }`

The updated changed properties function was essential for the implementation of multiple card components in our project. Using the need property, we were able to update the display of each card for multiple variations. There are some styling and accessibility concerns to address, but we are making progress on those as our final web component gets close to completion. 

A time consuming challenge we faced while developing the trading card was the wiring of the demo. We had issues because we were unsure of how to implement each key from the map into a separate HTML element on the frontend. We also struggled when working with HAX as this was the first experience any of us had with trying to implement and contribute a feature to a large project.

We failed to allow editing via HAXTheWeb wiring because of the way the attributes are set by the map. We wanted to include this capability but were unsure of how to dynamically set the current attributes and allow for customization at the same time. Our final project is complete but it is an understatement to say we are disappointed with the lack of variability and accessibility.