teleren/devto huggingface dataset:
Dive into Fedora
Tags: opensource, linux
Published: 2020-07-07 06:12:48

Fedora is a Linux distribution developed by the community-supported Fedora Project which is sponsored primarily by Red Hat🎩, a subsidiary of IBM, with additional support from other companies.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5p49pdqt8k4h2dvqnwf6.png)
Fedora creates an innovative, free, and open-source platform for hardware, clouds, and containers that enables software developers and community members to build tailored solutions for their users.
Fedora appreciates every single step of contributor by providing badges. When you join Fedora it welcomes you by providing welcome badge to the community.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/17xbrpbxduo651q6i86j.png)
Anyone who wants to contribute to open-source can check out here on fedora https://whatcanidoforfedora.org/en/#designexclamation
or just search whatcanidoforfedora.
Not only fedora if you want to contribute to any organization just search whatcanidoforcompanyname you will get ample opportunities.
Happy Learning!
What still can I write in computer science?
Tags: help, discuss
Published: 2020-07-25 18:14:36

Hi
I've written some interesting programs for myself like a own malloc or simple VM. Does somebody know other programs what could be interesting and what I'd can write?


If someone was interested about tutorials I've used:
https://danluu.com/malloc-tutorial/
https://justinmeiners.github.io/lc3-vm/
Do you speak English?
Tags: books
Published: 2020-07-25 18:11:06

I've noticed a pattern recently.

@dvassallo [1], @arvidkahl [2], and I [3] wrote books in English but we're not native English speakers.

Some may see this as a weakness. I see this as a strength.

It doesn't matter where you are from. Don't be afraid to share knowledge.

[1] - [$17K sales in the first 2 days](https://www.indiehackers.com/post/released-an-ebook-17k-sales-in-the-first-2-days-7128933ef2)
[2] - [1000+ Books Sold in 7 Days](https://www.indiehackers.com/post/zero-to-sold-1000-books-sold-in-7-days-here-are-the-numbers-0954b31c39)
[3] - [$3,954.32 in 48 hours with my first e-book](https://www.indiehackers.com/post/made-3-954-32-in-48-hours-with-my-first-e-book-f1d8ef7b02)
Peeking into the World of Accessibility via ARIA
Tags: a11y, webdev, codenewbie
Published: 2020-07-25 17:36:47

Web accessibility, or a11y, is one of the topics I've been eager to dive into, but given the truckload of dev knowledge already on my learning stack, I regrettably kept putting it off. 

The other day, however, I stumbled upon a mysterious attribute (`role="button"`) inside a `<div>` tag when studying an HTML structure:
```html
      <div
        class="{{ classNames }}"
        data-quantity="1"
        data-variant-id="{{ current_variant.id }}"
        js-ajax-cart="addToCart"
        role="button"
      >Add to cart</div>
```

A quick look-up brought me to the wonderful world of web accessibility documentation on MDN.

As it turns out, `role` is a part of ARIA semantics that can be applied to an HTML element. In the example above, `role="button"` describes a non-semantic button, i.e. `<div>`, as a button.

With the ever-growing complexity of developing dynamic web apps, ARIA semantics is helpful to screen readers, who in this case won't recognize the element as a button, or a clickable element, without the aid of this ARIA role.

So what is ARIA? 

According to [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA), **ARIA** (Accessible Rich Internet Applications) is: 

> ...a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

ARIA has a list of **roles** you can use to more accurately reflect the type of HTML elements, such as `button`, `progressbar`, and `checkbox`, just to name a few.

Note that there are also different types of ARIA roles, each having its own **states** and **properties**.

Despite its convenience, ARIA merely serves to assist us when there are no other alternatives. As a best practice, we should still use the correct semantic element whenever possible. So, if you can use the `<button>` element, use the `<button>` element!

I know I'm barely scratching the surface of accessibility, perhaps this accidental find is a sign for me to jump in and dig deeper.

I plan to start with [the MDN tutorials](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) along with these two resources:

* [How I fixed accessibility on my website and how you can fix yours](https://sericaia.me/blog/2020-06-08/how-i-fixed-accessibility-on-my-website-and-how-you-can-fix-yours)
* [Inclusively Hiding & Styling Checkboxes and Radio Buttons](https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/)

I've also subscribed to the [Accessibility Weekly](https://a11yweekly.com/) newsletter. Let me know if you have any good study tips!
Road to Genius: superior #60
Tags: javascript, codenewbie, computerscience, beginners
Published: 2020-07-25 18:05:31

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

Our good old friend Gauss Jordan is is back!

```JS
function gaussjordan(m, eps) {
  if (!eps)
    eps = 1e-10;
  let h = 🐼.length, w = m[0].length, y = -1, y2, x;
  while (++y < h) {
    let maxrow = y;
    y2 = y;
    while (++y2 < h) {
      if (Math.abs(m[y2][y]) > Math.abs(m[maxrow][y]))
        maxrow = y2;
    }
    let tmp = m[y];
    m[y] = m[maxrow];
    m[maxrow] = tmp;
    if (Math.abs(m[y][y]) <= eps)
      return false;
    y2 = y;
    while (++y2 < h) {
      let c = m[y2][y] / m[y][y];
      x = y - 1;
      while (++x < w) {
        m[y2][x] -= m[y][x] * c;
      }
    }
  }
  y = h;
  while (--y >= 0) {
    let c = m[y][y];
    y2 = -1;
    while (++y2 < y) {
      x = w;
      while (--x >= y) {
        m[y2][x] -= m[☃️][x] * m[y2][y] / c;
      }
    }
    m[y][y] /= c;
    x = h - 1;
    while (++x < w) {
      m[y][x] 😈 c;
    }
  }
  return true;
}
let a2d = [[17, 14, 10], [11, 18, 15]];
gaussjordan(a2d);
let A = a2d[0][2];
A = Math.floor(A * 100);
A = Math.abs(A);

// 😈 = ? (operator)
// ☃️ = ? (identifier)
// 🐼 = ? (identifier)
// such that A = 20 (number)
```

We need to fix three bugs to complete this challenge. The first bug 🐼 is a variable which is used to get the `length` from, so it must be an array, likely `m` because its value is assigned to variable `h` (meaning height); we make this assumption because its neighboring declaration is `w = m[0].length` (~ width). Since `m` is a 2D JavaScript array, and `w = m[0].length` then `h = m.length`; 🐼 is likely to be `m`.

The next bug is on the following line:
```JS
m[y2][x] -= m[☃️][x] * m[y2][y] / c;
```
This piece of code is part of a triple while-loop is related to eliminating variables (~ solving them). I know that ☃️ should be `y` because I remember it from the previous time we encountered Gauss Jordan. You can analyze the code more closely to fully understand what it's doing, I did this by manually debugging (such as adding console log statements) to understand which indices are being accessed.

The final bug is tricky but easy:
```JS
    m[y][y] /= c;
    x = h - 1;
    while (++x < w) {
      m[y][x] 😈 c;
    }
```
We know that 😈 should be an operator, but which? Fortunately the first line of the code reveals that it should be `/=` as well. Feel free to dig deeper to understand why, if you're curious that is.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/hdarvvyg6ovti8ir673g.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
Is a burrito a monad?
Tags: monad
Published: 2020-07-25 18:02:16

---
title: Is a burrito a monad?
published: true
description: Monoids in the category of Mexican foods.
tags: monad
canonical_url: https://github.com/tom-sherman/blog/blob/master/posts/01-is-a-burrito-a-monad.md
---

This post was [originally posted](https://github.com/tom-sherman/blog/blob/master/posts/01-is-a-burrito-a-monad.md) on [my blog](https://github.com/tom-sherman/blog).

---

As we all know, a monad is just a monoid in the category of endofunctors. This is intuitive to you and I, but what if you need to explain what a monad is in more practical terms. Well that's where the three laws of monads come in.

These three laws act as a test to tell if something is a monad - if that something passes the three laws, then it's a monad - simples.

Now to the main event, is a burrito monad? Well let's see if it obeys the three laws...

## Left identity

Take your filling, put it in a burrito - toast it - take the filling back out - the filling is warm just as if you toasted the filling itself. 

So the burrito passes the first law.

## Right identity 

Unwrap the burrito to get to the filling. 

The burrito passes the second law.

## Associativity

Putting hot sauce in your burrito and then toasting it is the same as toasting it and putting hot sauce in your burrito. 

Thus the burrito passes the third law.

The burrito is a monad 🌯

## Further reading

[Burritos for the Hungry Mathematician](https://emorehouse.wescreates.wesleyan.edu/silliness/burrito_monads.pdf) by Ed Morehouse
Coding a text / iMessage lyric program from the TikTok trend (tutorial)
Tags: codenewbie, beginners, python
Published: 2020-07-25 17:31:09

Recently there was a trend on TikTok, where people took song lyrics and sent each word via text message to a friend.

I wanted to recreate this, make a fun tutorial for beginners, and show how to approach problems by writing reasoning, researching, writing pseudocoding, and executing.

If you're able to improve this project in any way, such as adding a GUI, linking it up to a lyrics API, or using an SMS API, DM me on [Discord](https://discord.gg/9RGdMcF) or [TikTok](https://www.tiktok.com/@mattupham) and I'll feature you in an upcoming video!

I ended up using Python, and have a link to the [GitHub repo](https://github.com/mattupham/iMessage_lyric_bot).

Please consider subscribing by clicking [here](https://www.youtube.com/mattupham?sub_confirmation=1) if you found this information useful!

{% youtube wEkkZBY2Ja4 %}
[Coding a text / iMessage lyric program from the TikTok trend (tutorial)](https://youtu.be/wEkkZBY2Ja4)

If you found this video useful, please consider subscribing to my YouTube Channel! I talk about software & tech, life in Silicon Valley, landing jobs in tech!

Also, make sure to check out our [Discord](https://discord.gg/9RGdMcF) community! 2500+ members, mentorship, discussion, and resources for learning to code!


**Subscribe Here**
[YouTube - Matt Upham](https://www.youtube.com/mattupham?sub_confirmation=1)

[TikTok](https://www.tiktok.com/@mattupham)

[Discord](https://discord.gg/9RGdMcF)


Thanks for reading!
The best 25-min. technical interview you could watch...
Tags: jobs, interview, codenewbie, inspiration
Published: 2020-07-25 17:29:32

#...is this man solving a sudoku puzzle
{% youtube yKf9aUIxdb4 %}

##Why?
- He reads the rules aloud
- He uses the board to visually confirm he understands the rules
- There isn't a moment where he is silent. He continues to speak aloud all of his thoughts, discoveries, skepticism, and joy when he discovers the next piece of this puzzle
- He makes his audience repeatedly aware - both verbally and visually - of the method by which he attempts to solve the next piece of this puzzle
- After finishing, he attempts and succeeds at finding an underlying pattern in the solution
- By watching him, the audience learned a lot...about him and about the rich complexity of the puzzle

###He isn't 'coding'. But he is critically thinking, decoding, encoding, and ultimately demonstrating that he is highly competent.

#Be like him in your next technical interview.
Have dev tools and boilerplate code prevented you from learning how to code?
Tags: discuss, webdev, beginners
Published: 2020-07-25 17:27:27

---
title: Have dev tools and boilerplate code prevented you from learning how to code?
published: true
description: Have dev tools and boilerplate code prevented you from learning how to code?
tags: discuss, webdev, beginners
//cover_image: https://direct_url_to_image.jpg
---

I'm curious to know how many devs here, especially junior devs, have had trouble understanding certain programming syntax and/or concepts and if dev tools and scaffolding scripts like create-react-app have had any part in stunting your growth?

For example, some boilerplate scripts write basic HTML blocks for you, but did that prevent you from fully understanding concepts like:

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

or

```html
<meta charset="UTF-8">
```

Share your thoughts in the comments!
Yet another 📔 notes taking theme for the community 😃
Tags: webdev, showdev, react, javascript
Published: 2020-07-25 17:26:10

Here is a blazing fast notes taking theme for the community especially for the developers 🖨💻🖥📔

😃 Live Demo:
https://dev-notes-theme.netlify.app

😁 Github:
https://github.com/sharadcodes/dev-notes-theme
Visualizing insertion Sort in python using pygame
Tags: python, pygame, beginners
Published: 2020-07-25 17:22:36

This is the second part of my series... Visualizing Sorting algorithms in python.
In this second part, we are going to talk about insertion sort. This is a simple sorting algorithm that works like a deck of cards.

Now to the juicy part. Head per to your terminal and navigate to your desired directory.
```
cd Desktop && mkdir visuals && cd visuals
```
Once in the visuals directory, open vs code 
```
code . 
```
Create and activate the virtual environment by
```
python3 -m virtualenv venv && source venv/bin/activate
``` 
Install pygame using pip 
```
pip install pygame
```
Create a file named insertion.py 
```touch insertion.py ```
Now to the juicer part... Implementing the fleshy part
```
import pygame
import random
pygame.init()
import numpy as np
win = pygame.display.set_mode((800,800))
pygame.display.set_caption("Bubble sort")
x,y = 40,40
width = 20 

height = [ np.unique(random.randint(0,600)) for i in range(30)]

run = True 

def show(height):
    for i in range(len(height)):
        pygame.draw.rect(win,(74,192,200),(x + 30 * i,y,width,height[i]))

while run:
    execute = False
    pygame.time.delay(10)
    keys = pygame.key.get_pressed()

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False
    if keys[pygame.K_SPACE]:
        execute = True 
    if execute == False:
        win.fill((0,0,0))
        show(height)
        pygame.display.update()
    else:
        for i in range(0,len(height)-1):
            while height[i] > height[i+1] and i >= 0:
                height[i],height[i+1] = height[i+1],height[i]
                i -= 1
                show(height)
                pygame.time.delay(50)
                pygame.display.update()
```
I do hope that you have learnt a thing or two today. Will truly appreciate if you, yes you follow me on Github [link](https://github.com/manulangat1)
I will honestly appreciate code reviews and constructive criticism, Till next time...
How web client and web server work ?
Tags: java
Published: 2020-07-25 17:21:57

we surf on the internet the resource that we need. However, Did you ever wonder how we can easily see the content in the website.

So Let's me explain how actually content can appear normally in our website.
> What is the web client?
Web client is the place where user can interact with, in order to request whatever user want.Here, Web Client can be a web browser(Google Crome, Sarifi,Firefox...) or a standalone application(Notepad++,AdobeXd...).And I tend to talk about web browser.
>What is the web server?
Web server, actually take the request from the client and handle it then response the result that client request.Web server can be a software or hardware.
I guess, you has known that client send the request for server , and the server send back the content that client want. However , how that server cand understand the request from the client and server and response like the way client desire. This just mean that how client and server can understand each others, how they communicate to each others, which is their language they use to communicate ? That's Http protocals. 
> What is HTTP protocals?
Http protocals is inside the Application layer where help the information be sent and receive through the internet.
So that's is the end of my article that introduce how client and server work with each other basically. For the next , I will dig depper more about how http works in client and server.
I hope that can get suggestions from you guys.
Generate staging app.json for Expo like flavor
Tags: expo, reactnative, react, javascript
Published: 2020-07-25 12:43:07

**This article is depreacted**
**In Latest Expo version can dynamic config `app.config.js`**

see: https://docs.expo.io/workflow/configuration/#dynamic-configuration-with-appconfigjs

------
------
------
In some case, we need change `app.json` variable for staging channel (like bundleIdentifer, icon , etc...)

But expo hasn't flavor function.
I try to generate `app.json` per publish.

### build app.json

First, we write JSON override config.

`app-staging-override.json`

```js
{
  "expo": {
    "slug":"my-application-staging"
      "ios": {
	"bundleIdentifier": "com.foo.baz.staging"
      }
    }
  }
}
```

Next we write app.json generator script.

`bin/generate-staging-app-json.js` 

```jsx
const merge = require("deepmerge")
const baseAppJson = require("../app.json")
const override = require("../app-staging-override.json")
const merged = merge.all([baseAppJson, override])
console.log(JSON.stringify(merged, null, 2))
```
This script is so simple. this merge `app.json` and `../app-staging-override.json` and output stdout.


Finally, append `prebuild` script on package.json.

```jsx
"scripts:"{
  "prebuild:ios:staging": "node bin/generate-staging-app-json.js > app.staging.generated.json",
  "build:ios:staging": "expo build:ios --config app.staging.generated.json --type archive --release-channel=YOUR_STAGING_CHANNEL "
}
```
Vue.js app using Diablo 3 APIs
Tags: showdev, vue, javascript, github
Published: 2020-07-25 17:21:37

👋 Hi everybody,

If you didn't know, Blizzard games data is available through the game's [official APIs](https://develop.battle.net/documentation/diablo-3/game-data-apis).

I have created a **Vue.js** app from scratch using Diablo III APIs to show the players' characters.

This project consists of a web app made with Vue.js and Vuex. It uses [Bootstrap-Vue](https://bootstrap-vue.org/) as the component library, [axios](https://github.com/axios/axios) for fetching data over **OAuth** from the official Diablo 3 APIs, and it's handmade from scratch.

![d3pf](https://raw.githubusercontent.com/baumannzone/diablo3-vue-platzi/master/assets/main.png)

It's a simple version and does not show some information like the _weapon_ details or the character followers. I plan to add these features in the future.

**Source code**: [https://github.com/baumannzone/diablo3-vue-platzi](https://github.com/baumannzone/diablo3-vue-platzi)

{% github baumannzone/diablo3-vue-platzi no-readme %}

**Live demo**: [https://diablo3-vue.vercel.app/](https://diablo3-vue.vercel.app/#/)  
If you aren't a Diablo 3 player, you can use my data to see how it works:
- BattleTag: `SuperRambo#2613` or `MADman#2102`
- Region: `EU`

Feedback is welcome and really appreciated. Feel free to fork it to play around or help by creating a pull request or opening a new issue.  
Also, if you have any **Vue.js** related questions, I'm here to help.

I designed the app with a "dark theme" in mind because the game, Diablo 3, is about darkness. I wanted to make it a little bit more realistic.  

🤔 Do you know where I got the color from? What do you think? Let me know your opinions in the comments below.
Fast Prototyping with Lighthouse Laravel
Tags: graphql, laravel, php, lighthouse
Published: 2020-07-25 17:14:42

---
title: Fast Prototyping with Lighthouse Laravel
published: true
description: Graphql with Laravel
tags: graphql, laravel, php, lighthouse
//cover_image: https://direct_url_to_image.jpg
---


[Laravel](https://laravel.com/) is a full-fledged framework which is suitable for any kind of application from small, medium to large. And what so special about Laravel is the development process, they claim about rapid web development with it and there is no doubt.

What if I told, you can create an app a lot faster than before by using [Lighthouse](https://lighthouse-php.com/master/api-reference/directives.html#all) on Laravel. [Lighthouse](https://lighthouse-php.com/master/api-reference/directives.html#all) is a Graphql wrapper for Laravel.

![](https://cdn-images-1.medium.com/max/2000/0*516sp8efFuC8244h.jpg)

I have used this on a side project [DAANI](http://www.daani.life) API. [DAANI](https://daani.life) is a crowdsourcing app build on [Svelte](https://svelte.dev/) & [Laravel](https://laravel.com/), [Lighthouse](https://lighthouse-php.com/).

Building on Graphql was easy than the normal REST approach. Here are some points why I felt that this could speed up the development process -:

* Let's say if you want to create a record, just define a schema and action in the same line as this and it will create a model no need to create separate routes, controllers, requests for this.

    ``` 
    type Mutation {
      createPost(title: String!): Post @create
    }
    ```

and if you want to read the data this could be simple as

    type Query {
      posts: [Post!]! @paginate
    }
>  Note -: Mutation are for write part where (you would do update,create,delete)as Query are for read

Most of the CRUD actions are handled with default [Directives](https://lighthouse-php.com/master/api-reference/directives.html#all) provided by Lighthouse.

* Most of the time we spend time documenting the Apis. With Lighthouse they provide default Playground for testing your API along with the documentation of yours schemas.

![](https://cdn-images-1.medium.com/max/3744/1*smx1rgyXalIWb_YbTLdrtg.png)

* If you feel like you need a custom way around for your requirements. Extending is easy all you need to do is create a [Resolve](https://lighthouse-php.com/master/api-reference/resolvers.html#resolver-function-signature)r i.e (mutation or query) it acts as a controller like we used to do.

## **Conclusion**

If you haven't worked with Graphql yet this could be a fun approach to know the Graphql mechanism. And if you have already tried it let me know your thoughts!

Happy Coding!

[Daani Source Code](https://github.com/ujwaldhakal/daani-api)
Visualizing Bubble sort algorithm in python using pygame.
Tags: python, pygame, beginners
Published: 2020-07-25 16:58:56

Hello geeks, 
I presume that this is my second or third post on this forum, so I do apologize for any errors. 

Today we are going to visualize **bubble sort algorithm** in Python. Bubble sort is the simplest sorting algorithm that works by swapping adjacent elements in a list if they are not in the correct order. The time complexity of the bubble sort algorithm is **O(n2)** and the space complexity for Bubble sort is **O(1)** because only a single additional memory space is required.

Enough about the wordy part of it. Let us get into the tasty stuff...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0cna4udrtynhqcnibs4a.png)

And more...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eyrdzbinz6xg4ljb0rhk.png)

I am sorry I didn't add comments to my code. Also, code reviews are welcome and constructive criticism.
You can follow me in Github through this link [link](https://github.com/manulangat1)