teleren/devto huggingface dataset:
Week 1 as a Task force
Published: 2021-09-03 18:23:01

As we are ending the first week, I am happy with the improvements i am seeing so far. My very first take from soft skills is that the actual presentation takes less than 7% of the whole success of the presentation and this is something that was new to me. Second is I hadn't realized how much empathy can contribute to an effective communication, the session with Hans about communication shed more light to me about this matter.

Technical side, I learnt more about user stories and how helpful and impactful they are towards developing a good user interface by understanding things through the user’s perspective, I’ve also learnt how to formulate properly user stories, so that they can be more precise to the functionality itself. What was more of a challenge was completing the user story’s exercises and challenges in so little time but I managed to also put in a little bit more efforts. 

See you next week  :)
Empleos en Data y Analytics LATAM — Set. 2021 - I
Published: 2021-09-03 18:03:48

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻

✅ [Data Scientist - Rimac (Perú)](https://www.linkedin.com/jobs/view/2698098432/?alternateChannel=search&refId=W4qhNy4rsRL1SYEclQYXMw%3D%3D&trackingId=Q9MX%2BJhIr4yO2oINSuNK7A%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Engineer - Globant (Argentina)](https://www.linkedin.com/jobs/view/2431150334/?alternateChannel=search&refId=W4qhNy4rsRL1SYEclQYXMw%3D%3D&trackingId=%2BwvWA0FT%2B5ap5SrgZdXquQ%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Engineer - HP (México)](https://www.linkedin.com/jobs/view/2698076390/?alternateChannel=search&refId=W4qhNy4rsRL1SYEclQYXMw%3D%3D&trackingId=XDvarwvxjdosk1%2FWqwEAXA%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Engineer - everis (Colombia)](https://www.linkedin.com/jobs/view/2692897038/?alternateChannel=search&refId=W4qhNy4rsRL1SYEclQYXMw%3D%3D&trackingId=7ofO%2FsSZ2ssQfpIVdOmxiQ%3D%3D&trk=d_flagship3_search_srp_jobs)

Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datahack.la
Pure CSS Spinner
Published: 2021-09-03 17:55:09

I use a simple stock image and some vanilla CSS to create a simple spinner. 

![Spinner Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/558m0ct1fjq7s5o4ao0m.gif)

For this spinner I got this simple spinner of [Pixabay](https://pixabay.com/illustrations/circle-rainbow-logo-color-spectrum-1613999/) (thanks [gorkhs](https://pixabay.com/users/gorkhs-268986/)).


![Rainbow Spinner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cf380yfbny5pr5kgk58.png)

We start with just a very simple structure in our html.

    <div class="spinner">
      <img src="./rainbow.png" class="img"/>
    </div>

Tip: *Make sure you include the correct path and name to your image*.

After some general styling, we do the spinner action using CSS keyframes. For the speed I chose, I went with this:

     @keyframes spin {
       0% {
         transform: rotate(0deg);
       }
       100% {
         transform: rotate(360deg);
       }
     }

Want to see the full tutorial? Watch the YouTube video below or watch in on [CodeCast](https://play.codecast.io/PbwpyNMmQG0l-pure-css-spinner) to get access to all the code in the Player.

{% youtube 3GhvMX0N-No %}

Be sure to follow me on [CodeCast](https://www.codecast.io/users/amy) for more of my tutorials!
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-09-03 17:47:51

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hi everyone! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Getting out into nature... or whatever else might spark joy ❤️ 

---

Happy Friday! Great job this week 🎊 

![Neverending Story](https://media.giphy.com/media/cOB8cDnKM6eyY/giphy.gif)
🚀 React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]
Tags: react, webdev, tailwindcss, frontend
Published: 2021-09-03 17:35:48

---
title: 🚀 React TypeScript Starter with Next JS, Tailwind CSS, Webpack 5, ESLint, Prettier [Open Source]
published: true
description: A React TypeScript Starter Template for quick start any projects with Next JS, Tailwind CSS, Webpack, ESLint, Prettier. A free and open source React Template.
tags: react, webdev, tailwindcss, frontend
cover_image: https://github.com/ixartz/Next-js-Boilerplate/raw/master/public/assets/images/nextjs-starter-banner.png?raw=true
---

A React Starter Template to start any project in perfect condition with Next JS, Webpack 5, Tailwind CSS. It was built for developer experience in mind with type checking (TypeScript), linter (ESLint) and Code formatter (Prettier).

The project has reached 500+ ⭐ stars on GitHub.

You can test the [React Starter Template live demo](https://creativedesignsguru.com/demo/Nextjs-Boilerplate/).

{% github https://github.com/ixartz/Next-js-Boilerplate %}

## Built with latest technology

Here is the stack:
- React 17
- Next JS 11
- Tailwind CSS 2 with JIT
- TypeScript 4.4
- React 17
- ESLint for TypeScript
  - with Next JS default configuration and Next JS Core Web Vitals
  - with Airbnb configuration
- Prettier, integrated to ESLint
- Husky
- Lint-Staged
  - Running linter
  - Running type checking before committing
- PostCSS for Tailwind CSS and integrated to styled-jsx, NextJS default CSS-in-JS library
- VSCode configuration
  - Debugging configuration
  - VSCode Extension
  - VSCode Settings
- Strict Mode for TypeScript and React
- SEO with Next-seo
- Bundler Analyzer
- One click deploy
  - Vercel
  - Or, Netlify
  - Or, you can deploy manually to any hosting service

## Nextless JS, React SaaS Boilerplate Template

Nextless JS uses the same tech stack to build a SaaS product. It helps you to save time and you can focus on your products.

You can find more information on the tech stack at [Nextless.js SaaS Boilerplate](https://nextlessjs.com)

[![Next JS SaaS Boilerplate Starter](https://nextlessjs.com/assets/images/hero-image.png)](https://nextlessjs.com)

You get everything you need to build a SaaS with:

- Landing Page
- User Dashboard
- Authentication
- Highly scalable backend
- Infra as code
- Stripe Integration with Subscription payment

Following the best practice in web development, you can easily customize to meet your needs and requirements. You can now launch your SaaS product better and faster.
Requests: A Diferença entre Ready State e Status Code
Tags: backend, api, architecture, braziliandevs
Published: 2021-09-03 17:34:49

---
title: Requests: A Diferença entre Ready State e Status Code
published: true
description: Por vezes os conceitos de ready state e status code são erroneamente misturados. Então bora separar o joio do trigo
tags: #backend #api #architecture #braziliandevs
cover_image: https://images.unsplash.com/photo-1537806078416-64d8c0147e1e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80
---

Em se tratando de APIs algumas pessoas ainda podem confundir "Status Code" com "Ready State". Então vamo lá desembaraçar esse fio:

Toda request que retorna uma resposta (seja 200x, 300x, 500x, ...) é uma request bem sucedida do ponto de vista do browser. A request PER SI foi feita: ela saiu do seu browser, bateu no server e te devolveu algo, ainda que a resposta não seja a que vc esperava.

Essa verificação de "estado de requisição" é a Ready State. Isso não tem a ver se foi 200, 400, 500. Quando falamos de estados, estamos dizendo que a comunicação entre o browser e o server seguiu todos os seus estágios perfeitamente: algo foi enviado, e uma uma resposta foi dada.

Aqui vc pode ler um pouco sobre Ready States. Embora ela esteja atrelada a doc do XMLHttpRequest, a anatomia das Requests States são basicamente a mesma pra fetch e derivados (vc pode querer ver sobre preflight tbm): https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

Esse é o motivo de não devermos mandar Status Code 200 com { error: true } na body da resposta. Mas então se a Ready State define o estado de tráfego da requisição, pra que o Status Code?

O Status Code informa o posicionamento do Server referente a sua request. Ou seja: vc pediu algo, o server te entregou junto com um bilhete dizendo o que aconteceu lá.

Assim, se vc retorna um 200, vc não está dizendo que a REQUEST EM SI foi bem sucedida. O browser já sabe disso através do Ready State. Um 200 está dizendo que o server vai entregar o que ele deveria entregar.

Ou seja, o Status Code determina o STATUS da sua resposta, e não o ESTADO da requisição. Por isso vc deve retornar os status corretos para cada resposta.
Retornar 200 com { error: true } seria o mesmo que dizer: ta tudo bem, só que não.

## Concluindo

Ready State: Determina se tudo correu bem na request referente a comunicação do browser com o server e o recebimento da resposta.

Status Code: Determina a natureza da resposta dada pelo server. É o motivo abreviado da resposta dada e deve ter peso semantico.
7 reasons why you should start using React.
Tags: react, webdev
Published: 2021-09-03 17:31:02

1.**Speed**
  _React offers faster rendering. When you are building larger 
  applications, it's critical to monitor the changes. So react 
  helps to maintain high application performance and provide a 
  better user experience._

2.**Flexibility**
  _Most companies use React to save a large amount of time. This is 
  because react codes are simpler to manage due to their modular 
  nature than other front-end frameworks._

3.**Performance**
  _React JS makes complex applications run extremely fast because 
  it was designed to provide high performance in mind._

4.**Usability**
  _If you know JavaScript, deploying React application is quite 
  easy to achieve, and since React is fast, you can make new 
  changes to the application and deploy again within minutes._

5.**Supports both mobile and web development**
 _Hold up; we are not yet over. Not only web development, even 
  React supports mobile development using react-native to build 
  native applications for BOTH Android and iOS platforms._

6.**Easy to learn**
  _To be honest, it took me a while (days….)to learn Angular, but 
  trust me. I learned to React in HOURS because React was much 
  easier to learn than other front-end frameworks out there, and 
  on top of that, React is way more popular and used nowadays._

7.**Build rich user interfaces**
  _How the user interface looks at the end of the day matters a 
  lot. If your user interface doesn’t look good, then the chances 
  for your app to succeed will be below. So building rich user 
  interfaces matters, and as usual, React got your back. React 
  allows building such high-quality, rich user interfaces through 
  its declarative components._
DeclarativeX — A Composable approach to exception & conditions in Java
Tags: java, functional, opensource
Published: 2021-09-03 17:24:52

The idea of utilizing functional programming is to enable declarative programming along with supporting concurrency & state issues.

Most of the items are already better with Java 8 in terms of declarative programming, with the help of Optional Monad, Streams API.

I could sense a need, especially in exception handling and conditions. We might need a composable api to effectively handle exceptions and multi conditions.

The Declarativex library attempts to solve the issue through some functional and fluent interface way.

Chaining Exceptions

![Chaining Exceptions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su7tsoh14kool8omp831.png)


If all your functions has the same parameter within chaining, You can use this alternative


![Chaining Exceptions same parameters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovu82lz3anxm0ldly525.png)

Catching Exceptions based on Type and Performing appropriate actions

![Catching Exceptions based on Type and Performing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk2z557ondky3z70blr3.png)


Logging / peeking
![Logging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjuaatjnp9utlkbtysu2.png)


Composing Conditions

![Composing Conditions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt7kim5exflilzwj4lwg.png)

Usage
Add Dependency

```
<dependency>
    <groupId>io.github.muthuishere</groupId>
    <artifactId>declarativex</artifactId>
</dependency>

```


Import with

```
import declarativex.Try;
import declarativex.Filter;

```

[Github URL](https://github.com/muthuishere/declarativex)
10 ways to believe in yourself
Tags: motivation, beginners, devops, codenewbie
Published: 2021-09-03 17:20:20

10 ways to believe in yourself

Learning how to believe in yourself requires a holistic strategy. You must take control of your thoughts and feelings so you’re able to reach your peak state.

1. Realize it starts with you
To get in touch with your personal power, you need to adopt new routines. Consider building a meditation practice into your routine or start your day with priming. By incorporating a practice of self-affirmation into your morning routine, you can set the tone for a day filled with confidence.

2. Examine your limiting beliefs
Negative emotions like self-doubt or anxiety are deeply connected to the opinions we have of ourselves based on our life experiences. They’re your brain telling you that it’s time to examine these limiting beliefs and replace them with empowering ones.

3. Learn to respect yourself
To master the art of self-confidence, make a habit of treating yourself like you’d treat an esteemed mentor. Change your self-talk by catching your inner monologue when it turns negative and replacing those comments with positive thoughts.

4. Use the law of attraction
To fuel self-belief, surround yourself with people who inspire and support you. Whatever you want to achieve in your life, find people who will elevate you, not bring you down.

5. Get inspired
Make a point to seek out advice from others who have achieved your goals. Watch documentaries about people who have done great things in life. Read inspirational quotes and write down your favorites.

6. Remember past successes
If you’re feeling discouraged, remember moments in your past in which you were successful at a similar task. Or, remember moments in which you faced obstacles and overcame them with grace and courage. 

7. Face your fears
It’s human nature to experience fear and anxiety. But when you believe in yourself, you realize that those emotions are there to encourage you to take action, not to hold you back. People with self-belief turn fear into action by focusing on their goals as part of their overall purpose in life.

8. Create goals
Creating goals is part of facing your fears. Setting and achieving goals that help you overcome your fears will give you a sense of accomplishment. Your goals don’t have to be huge – taking small steps that add up to big results will improve your confidence and boost your ability to believe in yourself.

9. Learn a new skill
Whether you learn how to write code or how to play the piano, learning a new skill can increase your feelings of self-efficacy – your belief in your abilities to execute tasks, control your own behavior and attain your goals.

10. Always keep going
You’ll inevitably encounter obstacles, but it’s how you react to them that matters. You must dig deep and realign your focus on what you really want in life: discovering how to believe in yourself. It truly is within your reach.


#KeepWinning #LifeIsBeautiful
N Repeated Element - THE DAILY BYTE
Tags: algorithms, javascript, dailybyte
Published: 2021-09-03 17:12:46

Today's Byte

You are given an integer array, nums, which contains 2N elements. Within nums there are N + 1 unique elements and a specific element occurs N times. Return the element within nums that appears N times.

Ex: Given the following nums…
nums = [3, 3, 5, 1], return 3.

Ex: Given the following nums…
nums = [4, 2, 4, 5, 4, 1], return 4.

Intuition

Count number of elements using HashMap and return element when count > 1



Solution

```
const repeatedNTimes = function(nums) {
    const map = new Map()
    for(let i=0;i<nums.length;i++){
      if(map.has(nums[i])) return nums[i]
      else map.set(nums[i],true)
    }
};
```


Complexity Analysis : 
   Time Complexity: O(N)
   Space Complexity: O(N)
Create an automated file formator with python 
Tags: python, codenewbie, tutorial, codequality
Published: 2021-09-03 17:09:49

You all know how much messy it looks when all files lying on a single folder. like this 👇🏻
![0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzkhfft674vmqxnnd3yk.jpg)

we will going to create an automated file formator with python 

step 1
======
we will use build-in os module
→ stores all files in a list with os.listdir( )
→ remove main python file in which we will working from the list
![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzffxt44mk3i6q1gwafo.png)

step 2
=======
→ identifying file type and store them in their corresponding  list
→ we are going to create 4 folders ( images, docs, media, others ) in which all the files  will divided.
![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9l1mzju6hof8q08fzt6.png)

step 3
=======
→ Now create a function for folders making
![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ixjte0vbaaukil4qwmz.png)

step 4
=======
→ make a function for moving files to folders
![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9d5if3zi62s2k7rerpy.png)

Final code
==========
```python
import os

def createFolder(folder):
    if not os.path.exists(folder):
        os.makedirs(folder)

def moveToFolder(folder,fileName):
    for file in fileName:
        os.replace(file,f"{folder}/{file}")

files=os.listdir()
files.remove('main.py')

imgExt=[".img",".png",".jpeg"]
images=[file for file in files if os.path.splitext(file)[1].lower() in imgExt]

docExt=[".doc",".pdf",".txt"]
document=[file for file in files if os.path.splitext(file)[1].lower() in docExt]

mediaExt=[".mp4",".mp3"]
media=[file for file in files if os.path.splitext(file)[1].lower() in mediaExt]

others=[]
for file in files:
    ext=os.path.splitext(file)[1].lower()
    if (ext not in imgExt) and (ext not in docExt) and (ext not in mediaExt) and os.path.isfile(file):
        others.append(file)
createFolder("images")
createFolder("media")
createFolder("docs")
createFolder("others")

moveToFolder("images",images)
moveToFolder("media",media)
moveToFolder("docs",document)
moveToFolder("others",others)

```
---------------------------------------------------
Take a look on [the output](https://vimeo.com/597326692)
30 Developer Portfolio Project Ideas
Tags: career, codenewbie, beginners, programming
Published: 2021-09-03 16:30:26

It's hard to know what projects to make when trying to flesh out your portfolio, often we get caught up thinking it needs to be something unique. Projects need to be small, complete and functional, making your own take on any of these well trodden paths would be a great project for your portfolio. Each idea has a suggested rough tech stack you could use but in reality you could make all of these in pretty much any technology.

1. Straw Poll Web App - React, NestJS
2. Pokedex - Angular, PokeApi.co
3. Weather App - SwiftUI, [openweathermap.org/api](http://openweathermap.org/api)
4. Tweet Scheduler - JS/HTML/CSS and Supabase
5. Workout creator- Kotlin, Android
6. Timer Web App - React
7. Reminders text message - Vue, Twilio
8. Crypto Tracker - Angular, ExpressJS
9. Chat Web App - React, socket.io, NestJS
10. File Uploader Plugin - Angular, Ruby
11. IMDB Ratings Scraper - HTML/CSS, Python
12. Egg Timer - HTML/CSS, JS, CapacitorJS
13. Meme Maker - UIKit, Swift
14. Colour Picker App from Camera - Flutter, Dart
15. Tax Calculator - Angular
16. Slack Plugin - JS
17. Shopify Theme - NodeJS, React, GraphQL
18. Wordpress Plugin - HTML/CSS, JS, PHP
19. Instagram Post Maker - Kotlin, Android
20. Todo List CLI App - Python
21. Notes App - UIKit, AppKit
22. Flash Card App - SwiftUI
23. GitHub Timeline - Vue
24. Conway's Game Of Life - HTML/CSS, JS
25. Expenses Tracker - React, Electron
26. Currency Converter - React
27. Clone an App - same tech
28. URL Shortener - HTML/CSS, JS, Lavarel
29. Mine Sweeper - PhaserJS
30. Habit Tracker - Swift, UIKIt
Multiple Learning {Day - 21}
Tags: 100daysofcode, beginners, webdev, javascript
Published: 2021-09-03 16:27:00

#100daysofcode   {Day - 20}

Today I've learned How Browser works, DOM tree, Render Tree, JavaScript Engine V8 Internal mechanism, Integrate chrome devtool console with VS Code,  JavaScript event loop and concurrency and something more ..!

#javascript #programming
I ported openskill.js to python. No need to rely on the TrueSkill package and worry about licensing issues anymore.
Tags: python
Published: 2021-09-03 16:24:29

For a while we've had no good free alternative to trueskill. Anyone that used trueskill was always plagued with doubt about whether there would be any repercussions for using it in commercial projects. Luckily there was already a package for javascript that solved this issue by implementing the Weng-Lin Bayesian ranking system. So I decided to port it to python. Hope this is useful to the general Python community and those creating systems that need ranking.

## Installation
```shell
pip install openskill
```

## Usage
```python
>>> from openskill import Rating, rate
>>> a1 = Rating()
>>> a1
Rating(mu=25, sigma=8.333333333333334)
>>> a2 = Rating(mu=32.444, sigma=5.123)
>>> a2
Rating(mu=32.444, sigma=5.123)
>>> b1 = Rating(43.381, 2.421)
>>> b1
Rating(mu=43.381, sigma=2.421)
>>> b2 = Rating(mu=25.188, sigma=6.211)
>>> b2
Rating(mu=25.188, sigma=6.211)
```

If `a1` and `a2` are on a team, and wins against a team of `b1` and `b2`, send this into rate:

```python
>>> [[x1, x2], [y1, y2]] = rate([[a1, a2], [b1, b2]])
>>> x1, x2, y1, y2
([28.669648436582808, 8.071520788025197], [33.83086971107981, 5.062772998705765], [43.071274808241974, 2.4166900452721256], [23.149503312339064, 6.1378606973362135])
```

You can also create `Rating` objects by importing `create_rating`:

```python
>>> from openskill import create_rating
>>> x1 = create_rating(x1)
>>> x1
Rating(mu=28.669648436582808, sigma=8.071520788025197)
```

## Ranks
When displaying a rating, or sorting a list of ratings, you can use `ordinal`:

```python
>>> from openskill import ordinal
>>> ordinal(mu=43.07, sigma=2.42)
35.81
```

Source: https://github.com/OpenDebates/openskill.py