teleren/devto huggingface dataset:
Code and fix model- A recipe for disaster
Published: 2021-10-05 03:41:29


 The study of development models cannot be complete unless we include the traditional - code and fix model. It is a model (or rather a lack of model) which is easy, but useless if rapid development is to be achieved. Although no one uses it today, understanding what it was highlights the practicality of the development models we use. So rather this blog should have been titled "benefits of development models"

Here presenting adaptations from the book [Rapid Development: Taming Wild Software Schedules by Steve McConnell](https://www.amazon.com/Rapid-Development-Taming-Software-Schedules/dp/1556159005)

____
If you have not done any project planning or chosen another lifecycle model, then you undoubtedly use this 'model'
Combined with a short-schedule, which is the case most of the times, this model gives rise to code-like-hell approach. The code like hell approach is an approach which makes people work until either they or the project has been finished.

When you use the code and fix model, you start with a general idea of what you want to build. You might have a formal specification. You then use whatever combination of informal design, code, debug and test methodologies suits you until you have a product ready to release.

![WhatsApp Image 2021-10-04 at 9.46.37 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox325jsbl1ii3jw1c3ed.jpeg)

The code and fix model has two advantages. First, it has no overhead: You don't spend nay time on planning, documentation, quality assurance, standered enforcements, or any activities other than pure coding. Since you jump right into coding, you can show signs of progress immediately. Second it requires a very little expertise: anyone who has ever written a computer program is familiar with the code and fix model.

**For tiny projects that you intend to throw away after they're built, this model can be useful-for small proof-of-concept programs, for short-lived demos, or throwaway prototypes**

For any kind of projects other than a tiny project, this model is dangerous. It might have no overhead, but it also provides no means of accessing progress- You just code until you are done.
It provides no means of accessing quality or identifying risks. If you discovered three quarters of the way through coding that your whole design approach is fundamentally flawed, you have to throw the work you have done and start over again. Other models would set you up to detect such a fundamental mistake earlier, when it would have been less costly to fix.
Mengenal Server-Sent Events (SSE)
Tags: sse
Published: 2021-10-05 03:31:02

# Apa itu SSE?

Server-Sent Events (SSE) adalah teknologi HTML5 yang akan membuat server melakukan _push data_ ke client secara satu arah (_one-way messaging_). Hal ini akan menjadikan aplikasi akan selalu mendapatkan update terbaru secara otomatis. User tidak perlu melakukan interaksi apa pun seperti refresh page, click button, atau sejenisnya.

# Data Push vs Data Pull

Secara garis besar, komunikasi data antara server dan client dapat terbagi 3 macam, yaitu: no-updates, data pull, dan data push.

* No updates

Ini adalah komunikasi data paling sederhana antara client dan server. Tidak ada update data secara otomatis dari server. User harus refresh / reload page untuk mendapatkan data terbaru.
![No updates](https://learning.oreilly.com/api/v2/epubs/urn:orm:book:9781449371920/files/figs/dpah_0101.png)

* Data Pull

Data pull menggunakan teknik ajax untuk mendapatkan data terbaru dalam periode tertentu (contoh: 5 menit sekali). Client (browser) tetap harus melakukan request ke server secara otomatis untuk mendapatkan data terbaru. User tidak perlu refresh / reload halaman untuk mendapatkan data terbaru.
![Data Pull](https://learning.oreilly.com/api/v2/epubs/urn:orm:book:9781449371920/files/figs/dpah_0102.png)

* Data Push

Pada data push, server yang akan mengirimkan data terbaru ke client. Hal ini membuat client (browser) tidak perlu melakukan request ke server. User juga tidak perlu melakukan refresh / reload halaman untuk mendapatkan data terbaru. SSE termasuk ke dalam kategori data push.
![Data Push](https://learning.oreilly.com/api/v2/epubs/urn:orm:book:9781449371920/files/figs/dpah_0103.png)

Data push memiliki beberapa keunggulan dibandingkan data pull:

* Latency yang lebih rendah
* Saat tidak ada update, client tidak perlu melakukan request ke server secara otomatis sehingga meminimalkan resource/request yang terbuang.
* Lebih hemat bandwidth dan connection

# Aplikasi yang menggunakan SSE

SSE sangat berguna untuk aplikasi web yang membutuhkan fresh data dalam kurun waktu singkat. Contohnya: kurs valuta asing, pergerakan harga saham, dan aplikasi lainnya yang  membutuhkan realtime data updates.

# Selanjutnya

Teknologi yang termasuk ke dalam data push adalah SSE dan WebSocket. Pada post selanjutnya, kita akan membahas mengenai perbedaan SSE dan WebSocket.

# Referensi

Cook, D. (2014). _Data Push Apps with HTML5 SSE: Pragmatic Solutions for Real-World Clients_ (1st ed.) [E-book]. O’Reilly Media.
TIL: ESLint | Fix "'defineProps' is not defined."
Tags: todayilearned, vue, eslint
Published: 2021-10-05 03:24:11

## Story

In one of my `vue-ts` series' [article](https://dev.to/imomaliev/creating-vite-vue-ts-template-project-configs-improvements-3617), I was asked how to resolve [this](https://dev.to/algil/comment/1igom) issue

> How have you resolve this console warning (on npm run dev)?
>
> [@vue/compiler-sfc]definePropsis a compiler macro and no longer needs to be imported.
>
> But if I don't import defineProps in HelloWorld.vue file, the next line is underline in red:
>
> defineProps<{ msg: string }>()
>
> With this message:
>
> 'defineProps' is not defined.eslint(no-undef)
>
> Thanks!

## Question

How to fix ESLint error `defineProps' is not defined. eslint(no-undef)`?

## Answer

Add `'vue/setup-compiler-macros': true` to `env` in `eslint`. From [docs](https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-generate-no-undef-warnings):

```diff
module.exports = {
+   env: {
+     'vue/setup-compiler-macros': true
+   }
}
```

Basically in newer vue versions with `script setup` syntax `defineProps` is no longer needs to be imported because it is a `compliler macro` as it states in quote above. So the solution was just to configure `eslint` to not warn about `defineProps`

## Links

-   https://dev.to/algil/comment/1igom
-   https://dev.to/imomaliev/creating-vite-vue-ts-template-project-configs-improvements-3617
-   https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule
-   https://dev.to/imomaliev/comment/1ihh5
Rock It With Calinix
Tags: showdev, linux, leadership, git
Published: 2021-10-05 03:14:03

Currently working on my own Arch based Linux Distribution, CalinixOS. Making a distribution was my dream and fulfilling it currently doesn't let my joy stay bound! Its Alpha 5-3rc releases have been published and it's the pretty stable one

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zr34fs3xxx6fz89oq5ky.png)

What's so special in this distribution?

- Just Open the Box. Calinix is Arch, but not necessarily as hard as Arch Installation. Calinix comes with various packages, modern interface and a calamares installer out of the box

- Arch without Hassle. Yes, it's based on pure Arch with no custom package control, making your distribution rolling release, reliable and have infinite possibilities

- Community Support. Facing a problem? The official developers along with other friendly people of the community await you in the reddit, discord server and forum. We highly care for our community and like to help them in each way we can.

- The "Power User" kind-of desktop. With Vim, awesomeWM, Rofi and many other features, Calinix is a perfect choice for the linux "power users", with perfection! Though it shares it's looks with MacOSX, it is a lot more keyboard centric than MacOS

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju6ssral0xxam30sv07o.png)
 )

Explore more about it in 

- Website: https://get.calinix.tech/
- Github: https://github.com/Calinix-Team/Calinix-Arch
- A dedicated video: https://youtu.be/I7cBH_jkmLk

Direct Download Link for Alpha 5:
https://github.com/Calinix-Team/Calinix-Arch/releases/download/0.5-3c/CalinixOS-Arch-2021.09.24-x86_64.iso
Best Developer Tools for 2021
Tags: productivity
Published: 2021-10-05 02:59:06

Here are some #musthave tools for me - a front-end developer that I can swear by. 


### 1. [Github](http://github.com)

Okay, no brainer here. Of course we cannot live without Github. Over 56 million developers worldwide use GitHub to build and ship software. Version control is more crucial than ever for remote teams to diligently maintain the history of their code and collaborate on new versions.

### 2. [Quire](https://quire.io)

My team uses Quire as a project management software for 3 years already and every single day I log in Quire to use Kanban Board to track my team's progress. Many developers overlooked the importance of a good project management software. Don't! You need a reliable platform to track bugs and issues. 

And Quire is integrated with Github! Life can't get any better!

### 3. [Visual Studio](https://visualstudio.microsoft.com)

Visual Studio is an integrated environment that offers software developer tools for design and deployment, not to be confused with our #2 tool, Visual Studio Code.

### 4. [Docker](https://www.docker.com)

Docker uses containers to package software into standardized units for development, shipment, and deployment.

But sometimes it lagged. Docker developers, please fix bugs!

### 5. [Notepad++](https://notepad-plus-plus.org/downloads/)
Written in C++, this free and open source editor is a Notepad replacement that supports several coding languages.

How about your team?
SNIF ~ e2e TLS trust for IoT - an open source project
Tags: iot, tls, e2e, security
Published: 2021-10-05 02:04:14

---
title: SNIF ~ e2e TLS trust for IoT - an open source project
published: true
description: 
tags: IoT, TLS, e2e, security
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cta4f5p7o74swz3cbgg.png
---

SNIF enables anonymous end-to-end public trust TLS communications between apps through a designated SNIF relay. By providing TLS public trust on a full end-to-end level, SNIF creates a peer-to-peer app-level VPN, eliminating the middle-man and any corresponding ability to intercept, monitor or read the private communication.

Any app on any device can utilize a designated SNIF relay to allow any other app on any device to directly communicate with the SNIF enabled app via a trusted, certificated and anonymous host name using full end-to-end TLS encryption.

![Initializing the TLS Certificate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cta4f5p7o74swz3cbgg.png)
![Accepting TLS Connections](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5yw1hm7ol6oppyp4s38.png)
https://snif.host
https://github.com/vesvault/snif
Hacktoberfest #1
Tags: opensource, hacktoberfest
Published: 2021-10-05 01:42:22

[Hacktoberfest](https://hacktoberfest.digitalocean.com) is here! I hope to make some good contributions and I will be sharing my experience on this blog as I move along.

After spending way too much time looking for a "Good First Issue", I found one that seemed interesting for my first contribution of the month.

The project I found is a tool that creates beautiful Github user stats to add to your profile's [README](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme). The project is called [github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats)  and it's written mostly in PHP.

### The issue
The tool not only allows you to output the Github stats as an image, but also as JSON. The [issue](https://github.com/DenverCoder1/github-readme-streak-stats/issues/141) was that when an error occurred and the type was specified as JSON, the error output would still be an image instead of JSON.

### The fix
The [Pull Request](https://github.com/DenverCoder1/github-readme-streak-stats/pull/165) I submitted included a fix for this problem. Here is what I added to the catch section of the code:
```php
    if ($requestedType === "json") {
         // set content type to JSON
         header('Content-Type: application/json');
         // echo JSON error message
         echo json_encode(array("error" => $error->getMessage()));
         exit;
     }
```

There was also another section where I added similar code to output a JSON error message. It took me some googling and some help from the project maintainer, since it was my first time working with PHP, but I am happy that my code worked and was merged!

### Thoughts
What I really liked about this project was its documentation. They provided really easy and detailed instructions to get everything up and running. The only problem I had was related to a dependency called imagick. Installing it via Homebrew (macOS package manager) did not work so I was really happy when I found this [guide](https://postsrc.com/posts/how-to-install-imagick-on-macos-system) that helped me install it from source (Looks like the problem was due to the fact that I am using an M1 Mac).

This was a great start to Hacktoberfest and I'm surely looking forward to getting involved in other neat projects.
Android Simplified. Toasts vs Snackbars
Tags: java, android, tristan
Published: 2021-10-05 01:27:16

#Introduction
- At the best of times the Android documentation can be overwhelming and confusing, at the worst of times it is very overwhelming and very confusing. This series hopes to boil down topics and make them less complex.

### What is a Toast?
- A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout. You are probably already familiar with toasts because YouTube tutorials are full of them. 

- When reading the documentation for a Toast, which can be found [HERE](https://developer.android.com/guide/topics/ui/notifiers/toasts#alternatives). It lists some alternatives to using a toast and it mentions using a `snackbar` for a better user experience

###What is a Snackbar ?
- Well, the documentation,which can be found [HERE](https://developer.android.com/reference/com/google/android/material/snackbar/Snackbar), actually states, `Snackbars provide lightweight feedback about an operation. They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on screen and only one can be displayed at a time. They automatically disappear after a timeout or after user interaction elsewhere on the screen, particularly after interactions that summon a new surface or activity. Snackbars can be swiped off screen`

- Which sounds strangely familiar to a toast.

### What are the differences?
**Toast:**
- Can’t be dismissed by swiping
- Activity not required (Can show in android home or above other apps)
- Can’t handle user input  
- Good for showing info messages to user 

**Snackbar:**
- Can dismiss by swiping 
- Can show inside an activity of your app  
- Can handle user input
- Good for showing warning/info type messages to user that needs attention


#Conclusion
- If you are wondering which one to use, I would go with a Snackbar, mainly for the benefit of user experience.

- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
Working with Ref in React
Published: 2021-10-05 01:22:54

When you need to only read a value but no need to change it just use Refs (better than State in this case) But in general rarely use Refs, just use useState 

<b> Step 1 </b>
import  useRef from react
```
import React, {useRef } from 'react';
```
<b> Step 2 </b>

inside the method, set the values of refs
```
const enteredUsername1 = nameInputRef.current.value;
const enteredUserAge1 = ageInputRef.current.value; 
```
<b> Step 3 </b>
use the ref
```
 ref={nameInputRef}
```

<b> Example of full code</b>
```
import React, {useRef } from 'react';

import Card from '../UI/Card';
import classes from './AddUser.module.css';

const AddUser = (props) => {
  const nameInputRef = useRef();
  const ageInputRef = useRef();

  const addUserHandler = (event) => {
    event.preventDefault();

    const enteredUsername1 = nameInputRef.current.value;
    const enteredUserAge1 = ageInputRef.current.value; 
 
    props.onAddUser(enteredUsername1, enteredUserAge1);

   //in case you want to set your ref to null
    nameInputRef.current.value = ''
    ageInputRef.current.value = ''
  };


  return (
    <div>
      <Card className={classes.input}>
        <form onSubmit={addUserHandler}>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            type="text"
            ref={nameInputRef}
          />
          <label htmlFor="age">Age (Years)</label>
          <input
            id="age"
            type="number"
            ref={ageInputRef}
          />
          <button type="submit">Add User</button>
        </form>
      </Card>
      </div>
  );
};

export default AddUser;

```
NB: Using Ref makes the inputs to be  uncontrolled components (value in them is not controlled by react)
Vocabulary Building Day 22
Published: 2021-10-05 01:11:24

1. **self-effacing**(adjective): not claiming attention for oneself; retiring and modest.
![alt text](https://i.pinimg.com/736x/c6/88/25/c688257f1f7e7bc5b2880e7b97d7e3b1--public-relations.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=self-effacing&oq=self-effacing&aqs=chrome..69i57j0i512l9.11008j0j7&sourceid=chrome&ie=UTF-8)

2. **inimitable**(adjective): so good or unusual as to be impossible to copy; unique.
![alt text](https://pbs.twimg.com/media/D1Dr9RxWsAAe5ad.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=inimitable&oq=inimitable&aqs=chrome..69i57j0i433i512j0i512l7j46i512.11767j0j9&sourceid=chrome&ie=UTF-8)

3. **dishevel**(verb):make (a person's hair or clothes) untidy.
![alt text](https://t4.ftcdn.net/jpg/01/70/97/51/360_F_170975157_MFIMuG40oN3VAAbmfWABNi3qbgKBFxYS.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=disheveled&oq=disheveled&aqs=chrome..69i57j0i20i263i433i512j0i20i263i512j0i512l7.14303j1j9&sourceid=chrome&ie=UTF-8)

4. **whimsical**(adjective): acting or behaving in a capricious manner.
![alt text](https://orig00.deviantart.net/e64d/f/2016/128/b/5/whimsical_woodman_by_hibbary-da1rcv4.png)
[Checkout Pronunciation](https://www.google.com/search?q=gaudy&oq=gaudy&aqs=chrome..69i57j0i20i263i433i512j0i20i263i512j0i512l7.8040j0j9&sourceid=chrome&ie=UTF-8)
5. **furtive**(adjective): marked by quiet and caution and secrecy.
![alt text](https://phocab-photos.s3.amazonaws.com/httpwwwwarrenphotographiccoukphotographybigs15130-Furtive-Bengal-cat-white-backgroundjpg.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=furtive&oq=furtive&aqs=chrome..69i57j0i433i512l2j0i512l7.3553j0j9&sourceid=chrome&ie=UTF-8)
I hope this helps you if you are preparing for GRE exams.
Divtober Day 4: Loop
Tags: codepen, divtober, css, art
Published: 2021-10-05 00:39:11

---
title: Divtober Day 4: Loop
description: A diagram explaining how the for loop works using CSS and a single HTML element
published: true
tags: codepen,divtober,css,art
series: divtober
---

Again taking the word literally instead of looking for a better angle. Here's the entry for day 2 of #divtober: a diagram explaining how the for loop works using CSS and a single HTML element.

{% codepen https://codepen.io/alvaromontoro/pen/WNOqrXx %}

*It is animated if you see it on Chrome.
The Use of Portals in React
Tags: react, javascript
Published: 2021-10-05 00:16:38

<b> Getting a cleaner DOM with Portals </b> 

<b> Step 1 </b>
Got inside public/index.html and add
the roots near the 
<div id="root"></div>

```
<div id="backdrop-root"></div>
<div id="overlay-root"></div>
```


<b> Step 2 </b> 
Then import MyReactDOM from 'react-dom'
Fell free to name anything you want. I named it MyReactDOM in this example

```
import MyReactDOM from 'react-dom'
```



<b> Step 3 </b> 
Create methods that returns jsx to be used


```
const Backdrop = (props) => {
  return (<div onClick={props.onConfirm} />)
}

const ModelOverLay = (props) =>{
  return ( 
    <Card>
      <header>
        <h2> Invalid Input</h2>
      </header>
      <div>
        <p> The input is invalid </p>
      </div>
      <footer>
        <Button onClick={props.onConfirm}>Okay</Button>
      </footer>
    </Card>
  )
} 

```
<b> Step 4 </b> 
Put the two methods your exported component
syntax: 
ReactDOM.createPortal(child, container)

```
const ErrorModal = (props) => {
  return (
 <React.Fragment>

 {MyReactDOM.createPortal( 
   <Backdrop onConfirm={props.onConfirm}/>, 
    document.getElementById('backdrop-root'))}

 {MyReactDOM.createPortal(
  <ModelOverLay onConfirm={props.onConfirm}/>, 
   document.getElementById('overlay-root'))}
   
 </React.Fragment>
  );

};

export default ErrorModal;

```
Open Source Fantasy F1 app
Tags: laravel, vue, tailwindcss, formula1
Published: 2021-10-05 00:13:13

Are you a fan of Formula 1? 

I’m building an open source Fantasy F1 app (just like fantasy Football), and looking for contributors! 

Sure there are other Fantasy Racing Apps, that virtually do the same thing. I’m not enjoying using those apps, and wanted to build something that could get people interested. 

If you have any interest let me know, if you are interested but don’t know some of the dependencies it relies on, I would love to help! 

https://GitHub.com/krlmrr/Fantasy-F1