teleren/devto huggingface dataset:
Contributing to a COVID-19 website
Tags: opensource
Published: 2020-10-15 22:45:09

Because of the recent times I wanted to contribute to something about COVID-19, I found a website that seemingly needed help. An Indian student at NIT Jamshedpur (National Institute of Technology, Jamshedpur)

The repo that I contributed to is https://github.com/Mustafiz04/Covid-19-website

Or: https://covid-19-website.herokuapp.com

The first thing that I noticed while browsing the website looking for something that I could fix or create was that when on a page that isn't the home page, clicking on the links 'about', 'symptoms', and 'prevention' didn't route correctly. Issue: https://github.com/Mustafiz04/Covid-19-website/issues/2

Looking through the code I quickly realized that the href for the links was using '#' which wouldn't actually route back to the home page. The fix was simple, just adding '/' in front of it so it would go back to the root of the website.

But considering that this only took me about ~10 minutes of my time finding and fixing the bug I thought there must be something else that I can do.

Obviously the website creator presumably speaks Indian as a first language as I could see some spelling mistakes and grammatical errors on the home page. I decided that I was going to fix them for him. This took a lot longer then I thought it was going to...

https://github.com/Mustafiz04/Covid-19-website/issues/6

In addition to this I found another bug on the 'donation' route which made the footer not attached to the bottom, seeing that I have had this issue sometimes before you can easily just do

```css
position: absolute,
bottom: 0
```
But the issue is that he was using a general css file, so next you may ask "Well why not just add an inline css property" that's what I thought as well until I came across the reason as to why I chose to go through with this pull request as apart of my assignment. The original developer was using something called EJS (https://ejs.co/). I have never worked with EJS but it seemed sorta like a template system almost like handlebars.js.

Originally I was just going to look for a fix for that specific EJS issue but it actually turned out to me pretty much learning basic EJS.

After looking through docs for I don't know how long and learning EJS I found out that I still cannot add special properties so instead I increase the .donation class on the page which pushed down the footer to the bottom of the viewport. The fix is for any monitor <2160 which basically means it fixes anything 4k and below. (Not many monitors are above 8k right now anyways)

My two pull: https://github.com/Mustafiz04/Covid-19-website/pull/5, https://github.com/Mustafiz04/Covid-19-website/pull/7


TLDR; I got to contribute to a Covid-19 app and learnt about EJS
Simple React Dropdown List Component
Tags: react, hooks, javascript
Published: 2020-10-15 22:28:53

So here's something I had a tough time googling. I needed to create a dropdown list that makes the component re-render once selected using react hooks. Although it's incredibly simple, I was stumped for quite some time. Here's the code:

```react
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [selectedValue, setSelectedValue] = useState(0);
  const items = [
    { label: "Default", value: selectedValue },
    { label: "2 Rows", value: 2 },
    { label: "4 Rows", value: 4 },
    { label: "6 Rows", value: 6 }
  ];

  const handleChange = (event) => {
    console.log(event.target.value);
    setSelectedValue(event.target.value);
  };

  return (
    <div className="App">
      <h1>Simple Dropdown List</h1>
      <form>
        <select className="form-select" onChange={handleChange}>
          {items.map((item) => (
            <option key={item.label} value={item.value}>
              {item.label}
            </option>
          ))}
        </select>
      </form>
      <p>You have selected: {selectedValue}</p>
    </div>
  );
}
```
Hope this helps!
A JavaScript Utility... Library?
Tags: javascript
Published: 2020-10-15 22:01:21

---
title: A JavaScript Utility... Library?
description: Introduction to a collection useful JavaScript code
canonical_url: https://zellwk.com/blog/javascript-library
tags: javascript
published: true
---

I complied a list of useful JavaScript stuff into a [Github repository](https://github.com/zellwk/javascript).

This repository includes code for functions like:

- [Mix](https://zellwk.com/blog/creating-a-deep-assign-library/) (Deep assign library that works with accessors).
- [Getting translate values](https://zellwk.com/blog/css-translate-values-in-javascript/)
- [Getting keyboard focusable elements](https://zellwk.com/blog/keyboard-focusable-elements/)
- [Normalizing button inconsistencies](https://zellwk.com/blog/inconsistent-button-behavior/)

And many others.

You can install the entire library with npm.

```bash
npm install @zellwk/javascript
```

## Why this format?

I prefer publishing JavaScript stuff into one repository instead of splitting them into many small ones because:

1. It's easier for me to maintain – everything is in one place
2. It's easier for me to install – again, everything is in one place. No need to `npm` install a bajillion amount of libraries.

I was hesitant about releasing this library at first. It felt stupid. I thought nobody wouldn't use this collection anyway. I thought people prefer the current way where we install one small package each time with npm.

But [Shawn Wang](https://twitter.com/swyx) convinced me otherwise. He said it's okay as long as the library is treeshakable. Which makes sense. Shawn also told me Rich Harris had a similar thing called [Yootils](https://github.com/Rich-Harris/yootils).

This idea gave me the permission to release this repository publicly, which is why I'm sharing this with you today. If you find this collection useful, please also give some credit to Shawn for expanding my thoughts.

<hr>

Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/javascript-library).  Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.
My #100DOC - Day 50
Tags: 100daysofcode, challenge
Published: 2020-10-15 21:52:52

### Day 50: October 15, 2020

#### **Today's Progress**: 
1. **[Redesign of my portfolio](https://github.com/pablohs1986/pablohs1986.github.io)** (1h):<br>I kept working on the works section. I was stuck so I decided to change the course of the section. I have opted to implement Bootstrap modals and it is working fine.
    
#### **What I learned**: 
* How to implement Bootstrap modals.

#### **Total time**:
1h.
Get Addressibility to Multiple Child Components
Tags: angular, typescript
Published: 2020-10-15 21:51:54

*ngFor allows us to easily reuse components, like this:

```html
<div *ngFor="let address of addresses">
  <app-select    
     [items]="address.cities"
     bindLabel="name"
     bindValue="id">
  </app-select>
</div>
```

But how do we gain addressibility to them in our Typescript code?
 

```typescript
@ViewChildren(SelectComponent) 
   SelectComponents: 
      QueryList<SelectComponent>;

//Then in ngAfterViewInit():

  this.SelectComponents.forEach(select=>{
     debugger;
    });

```
The answer is to use QueryList with @ViewChildren
Source code of JSON Server app (written in PHP)
Tags: php, json, jsonserver
Published: 2020-10-15 21:50:10

---
title: Source code of JSON Server app (written in PHP)
published: true
description: 
tags: php, json, jsonServer
//cover_image: https://direct_url_to_image.jpg
---

## Database structure

Database: `json`
Table: `jsonData`
Field: `id, kunci, json`

## PHP codes

halaman/beranda.php

```php
<!DOCTYPE html>
<html>
<head>
	<title>JSON</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="JSON Server">
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
	<style type="text/css">
		h3 {
			text-align: center;
		}
		.tombolTambah {
			margin: auto;
		}
	</style>
</head>
<body>
	<h3>JSON Server</h3>
	<form method="post" action="olah">
		<input type="hidden" value="<?= md5(rand()) ?>" name="kunci">
		<textarea name="json" required></textarea>
		<input type="submit" class="tombolTambah" value="Tambahkan" name="">
	</form>
	<script type="text/javascript">
		tinggi = () => document.querySelector('textarea').style.height = `${window.innerHeight - 130}px`
		tinggi()
		window.addEventListener('resize', tinggi)
	</script>
</body>
</html>
```

halaman/olah.php

```php
<?php 
$db->prepare('insert into jsonData (kunci, json) values (:kunci, :json)')->execute([
	':kunci' => $_POST['kunci'],
	':json' => $_POST['json']
]);
header('Location: ' . $_POST['kunci']);
```

halaman/tampil.php

```php
<?php 
$data = $db->query('select json from jsonData where kunci = "' . $routes[1] . '"');
$hasil = '';
while ($row = $data->fetch()) {
	$hasil = $row['json'];
}
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
header('Content-Type: application/json');
echo $hasil;
```

halaman/ubah.php

```php
<?php 
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
if (!empty($_POST['json'])) {
	$db->prepare('update jsonData set json = :json where kunci = :kunci')->execute([
		':json' => $_POST['json'],
		':kunci' => $routes[1]
	]);
}
```

.htaccess

```apache
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
```

index.php

```php
<?php 
$db = new PDO('mysql:host=localhost;dbname=json', 'root', 'kucing');
$routes = explode('/', $_SERVER['PATH_INFO']);
if ($routes[1] == '') {
	include 'halaman/beranda.php';
} elseif ($routes[1] == 'olah') {
	include 'halaman/olah.php';
} elseif (strlen($routes[1]) > 0 && $routes[2] == 'ubah') {
	include 'halaman/ubah.php';
} elseif (strlen($routes[1]) > 0) {
	include 'halaman/tampil.php';
}
```
Intro to Functions In JS 💻
Tags: functional, codenewbie, javascript
Published: 2020-10-15 21:34:07

# Function Expressions 
This function is pretty easy. Like for example if wanted to add two numbers together I would write this: 

{% replit @Awesomecoder121/Adder %}

# Name Necessities

In functions, we usually have to pass an _argument(s)_ into the function. For example, `console.log()` can is one of the many arguments to put into a function. Also when writing a function you also put in a pair of (), parentheses tell the computer that it's a function. Without the parentheses then the function couldn't work. 

# Arrow-functions

There is a more modern function we can write called an arrow function. This is how to write one.
{% replit @Awesomecoder121/AdderArrowFxn %}

In arrow functions, the first thing we write is const which in Java Script is what we put to make a variable  after that we name it and put our variable names, then our arrow to make one you put an equal sign then put greater than sign. Then put in your "return" statement which in this case we are only want the code to do one thing other wise we do put a return statement, but we can get more into that in someother time for now just stick with the basic way. 

Anyways I hope you learned something! Let me know if you want a part 2!!! Thank you!!

@awesomecoder123
Global State in React
Published: 2020-10-15 21:22:00

A year ago I engineered my own React library for the global state and asynchronous data management with Context API and hooks (yeah, yet another take on such library :) It worked great for me ever since, but nobody else knows it. Recently I got an inspiration to write a little article / tutorial about it, and share it with the world, to see if anybody else likes it, and probably to receive some feedback. Check it out:

NPM: https://www.npmjs.com/package/@dr.pogodin/react-global-state

Article: https://dr.pogodin.studio/dev-blog/the-global-state-in-react-designed-right

**P.S.:** Why this one is better than a myrriad of alternatives? It allows to load some remote data into some.path of global state with a simple hook
```
const { data, loading, timestamp } = useAsyncData('some.path', asyncLoaderFunction)
```
and takes care to provide a way for it to work in Server-Side Rendering (SSR), and within split code chunks. And the simple synchronous usage of global state works with a hook closely mimicing the standard local state:
```
const [value, setValue] = useGlobalState('some.path.in.state', 'Optional initial value (can also be a number, an object, on an array)')
```
So far I have not seen all the same functionality in any alternative lib.
Can gRPC replace REST?
Tags: grpc, protobuf, microservices, protocolbuffers
Published: 2020-10-15 21:18:47

gRPC: Is it replaces RESTful webservices?

If you want to know what is gRPC and how to implement Microservices using gRPC framework, then check out following playlist: 
gRPC Java Tutorial: https://www.youtube.com/playlist?list=PL-OjXpIFhMreDjxmHkq79e0vPNMf88gjY

{% youtube TagQoZhMhG8 %}
{% youtube p-H9T-2lat0 %}
{% youtube TR-otP45eYU %}
{% youtube SV3xgZjiCYI %}
{% youtube J0AMX9YpdLk %}
First Hactoberfest
Tags: hacktoberfest
Published: 2020-10-15 21:17:12

## What I Learned From Hacktoberfest
I get know about hactoberfest from a youtube ads amd then i search it and gather more information about hactoberfest. by the hactoberfest when i am searching it i get know about different projects and it is very benifitial for me also that i can work on open source projects and it make my intrest in open source projects that i spend some more time on other projects learn something new and suggest something new to other devlopers also. so , in the end my experince with hactoberfest is amazing. Thanks @DigitalOcean for organising a wonderfull platform.

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
My First Hacktoberfest
Tags: hacktoberfest, opensource
Published: 2020-10-15 20:57:03

It was indeed a great experience contributing to the open source community. During the challenge, I learnt about a few repositories which are excelling in helping budding developers all over. The swags will definitely remind me of this wonderful journey especially in this tough situation.

Special thanks to #Hacktoberfest and @DigitalOcean for organizing this event.
Anyone looking for a new side-gig? - Developers assemble!
Tags: webdev, svelte, kotlin, typescript
Published: 2020-10-15 20:49:22

Before we start, I am a regular blogger here, not fishing. 🤖
Instructions to join at the end of the post.

---

I have an idea and I wonder if anyone wanted to work on something related to the e-commerce space, **Initially it will be a cool project for your resume and if it takes off, we can talk about partnering and starting up.**

### The backstory
My partner was chatting with me in the kitchen the other night, as we know the best ideas come from the kitchen! She told me about how she wants to setup a shop. She said, what about the made to order strategy.
Normally I think that made to order is for the realms of etsy, It doesn't scale... but hang on why doesn't it scale in the age of scale? 
I know why and I'd love to tell you more!

But let's get my credentials out of the way first. 
Why work with me? I love great technology, I love to learn and build cool things but that is not enough. 
I worked on Dyson's global public facing websites internally for a couple of years and In that time, I found out what was a pain in the ass to build and maintain. One aspect which I cant reveal here. This one thing, it can be turned into a service.


### Roughly what are we creating:
- A scaleable, marketable service
- Enhancing a portion of a typical e-commerce journey and allowing for integration and theming
- A way to make your shopping experience more immersive and engaging
- Bringing a new experience to shoppers worldwide

### Questions and Veige answers
> Does this thing exist already in the wild? 

Yes and no. No this is not a Shopify clone, it is out of scope for them. It's something that does already exist that some companies do make for their websites but its usually quite low on the priority list and tends to never work amazingly, or its outsourced to an agency, or its full of bugs and takes up a lot of time, its also a really cool and creative thing to build and can be wrapped up into a templated form and sold.

> Will it be open source?

I strongly believe in free software for those who cannot spare the expense, so for small business yes this will be free to use. And yes there will be an aspect of open source to some degree, but to core engine will remain closed.

### Your skills will shape this
If you like the sound of any of the following, reach out an we can start something, even if it's a couple of hours a week (what Im doing).

- 3D and Web game development
- Kotlin / Rust web development
- Typescript / JavaScript
- State Machines and Actors
- Dashboards
- UX and UI Design
- Accesible web
- Internationalisation
- Integrations design
- Serverless

Sweet thanks for hearing me out. 👋

## How to join
Follow me on GH and drop me a message here that you want to join.

**Update:** 🥳 looks like we are using svelte! A new experience for me, excited to learn something new!
"THE HACKTOBERFEST"
Tags: hacktoberfest, digitalocean, github, hacktoberfest2020
Published: 2020-10-15 20:41:16

## All About My Hacktoberfest2020 experience !!!!

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->

Yayy!!! i did this, I was contributing in many of the open source projects .But this HACKTOBERFEST congratulations message brings smile on my parents face , that's why this fest is lil more special to me . 
Hacktoberfest 2020 is one of the best experience of my journey to developer, that I will always cherish it. The excitement at the hour when my first pull request was merged can't be expressed in words.To Be Honest, I didn't know the importance of this fest i just take part in this fest for fun . My only target was to submit 4 pull requests but Later on I realized that I did more than 4 pull requests. I am extremely grateful to be a part of Hacktoberfest 2020 which boosted my confidence to a different level.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3sy50pgkvv40anwgx5fa.png)
Special Thanks to #Hacktoberfest and @DigitalOcean for organizing this event.
Extremely excited for my swags and stickers .
i was contributing in a project that will help students of my college while visiting the website of DSC , 
I have made a readme file for another's project so that other  people can understand the project insides. and many more like this . 
thank you !
Best way to start competitive coding and crack interviews.
Tags: computerscience, codenewbie, codepen, codequality
Published: 2020-10-15 20:39:50

[Best way to start competitive coding and crack interviews](https://medium.com/analytics-vidhya/top-and-best-free-competetive-coding-sources-and-resources-available-online-bb2f0ed2c559)
How to add local fonts to my website?
Tags: css, html
Published: 2020-10-15 20:18:16

Sometimes client might ask you to add a font to his/her website that he found or purchased online. Now you have to use this on the website. 

Those who like me are used to using Google Fonts or the default fonts on the Computer, this might seem like tricky. But it actually is not.

So, How do we achieve this? By using the `@font-face` rule of CSS.

First you have to download the font file and put it inside your project folder. The most supported font files are - **TTF/OTF, WOFF, and WOFF2**.
Now all you have to do is to add this to your CSS and give it a name. This name is what you will use to use the font.
For example,
```
@font-face {
  font-family: myFirstFont; /*The name you choose goes here*/
  src: url(sansation_light.woff);
}
```

Thanks for reading.

[My Twitter Profile](https://twitter.com/ShamsadAnam)
Why you should Stop using CSS Frameworks
Tags: css, webdev, design
Published: 2020-10-15 20:12:40

Yes CSS frameworks can be useful and speed up web design time which is the main purpose of why they were created.

But the issue with using CSS frameworks is that:

1. You will eventually forget css and not be able to use it when css frameworks are not an option 
2. Having custom styles is complicated (overriding issues) and will require multiple css files to be loaded.
3. Designing custom styled apps and websites is awesome and very creative as well as challenging, why avoid this? (My main reason)
4. Your designs will look generic, many people use bootstrap, material ui, etc. They all look the same.
5. Create your own css framework to use as your own personal style, this is much more rewarding and can be reused for future projects.


There are many more reasons i dislike css frameworks. These are just the main ones.

Do you agree? Let me know your thoughts below!

*Edit*
To clarify, as some people got a little excited, this article is an opinion piece and not meant to change people's way of doings things. I am simply dicussing why i don't like CSS frameworks, if you like to use them then by all means please do. This article only suggests, it does not force you to stop using frameworks - the title is just provocative on purpose.
4 Baby Steps to getting started with metrics
Tags: devrel, metrics
Published: 2020-10-16 09:14:55

---
title: 4 Baby Steps to getting started with metrics
published: true
date: 2020-10-15 19:56:41 UTC
tags: DevRel,metrics
cover_image: https://theagilecoder.files.wordpress.com/2020/10/pexels-tatiana-syrikova-3932876-banner-1.jpg
canonical_url: https://jasonstcyr.com/2020/10/15/4-baby-steps-to-getting-started-with-metrics/
---

I find getting started on things is one of the hardest things to do. When I started into looking at metrics, there were a lot of great examples of end results and amazing dashboards, but nobody yet mapping out how to get there. This quick primer gives you a background of my journey to getting started with doing DevRel metrics, and hopefully it can help you!

##HELP! I have no metrics!
A few years back, I was added to a growing team at Sitecore that up until then was just a few people trying to do everything. I had never had DevRel as my job role before. Or product marketing. I took charge of our enablement program and started trying to build out some ways of reporting on what we were doing.

Ultimately, I wanted to capture what we did accurately, but make it clear that the investment in our team was worth it.

**We had nothing.**

[Continue reading 4 Baby Steps to getting started with metrics →](https://jasonstcyr.com/2020/10/15/4-baby-steps-to-getting-started-with-metrics/)
My First Hacktoberfest 
Tags: hacktoberfest
Published: 2020-10-15 19:53:14

## What I Learned From Hacktoberfest

I was completely a beginner in the field of Open Source and Github but only for Hacktoberfest I tried and learned about Github and Open Source Contribution and made my first pull request on Github. Now I am enjoying contributing very much. I will keep contributing.....
Thanks @DigitalOcean for giving such an encouraging event.
Tailwind but not purgeCSS, and be friendly with other frameworks
Tags: webdev, css, help, tailwindcss
Published: 2020-10-15 19:43:07

I see that it is possible in React, and other CSS-in-JS libraries.

{% github bradlc/babel-plugin-tailwind-components no-readme %}

But, what if I don't use React? (Vue / Vanilla JS)

Another thought is [CSS module](https://github.com/css-modules/css-modules), but I find it extremely hard to Google for Tailwind CSS module (google just misunderstand...)
Hosting SSG outside creator's intended cloud (Next.js)
Tags: webdev, help, react, nextjs
Published: 2020-10-15 19:39:34

How was the experience, especially if you Next.js website is not only static site, but also has API functions?

Actually, even if static site, I felt that SPA experience is missing on navigation, if `next export`.

In short, I don't want to move from Netlify to Vercel.