teleren/devto huggingface dataset:
Polyfill in Reactjs
Tags: react, javascript, polyfill
Published: 2022-01-21 05:34:29

## What is Polyfill?

> **A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.** -- definition from MDN

## There're two approaches if you want to support older browsers like <u>ie11</u>:
**Manual imports from react-app-polyfill and core-js**
Install react-app-polyfill and core-js (3.0+):

npm install react-app-polyfill core-js or yarn add react-app-polyfill core-js

Create a file called (something like) polyfills.js and import it into your root index.js file. Then import the basic react-app polyfills, plus any specific required features, like so:
```
/* polyfill.js */
import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

/* index.js */

import './polyfills'
...
```

---

**Polyfill service**
Use the polyfill.io CDN to retrieve custom, browser-specific polyfills by adding this line to index.html:

```<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>```

note, I had to explicity request the Array.prototype.includes feature as it is not included in the default feature set.

## Finally, it might arise to your head a good question: Why polyfills aren't used exclusively?
The reason why polyfills are not exclusively used  is for better functionality and better performance. Native implementations of APIs can do more and are faster than polyfills. For example, the Object.create polyfill only contains the functionalities that are possible in a non-native implementation of Object.create.
Basit Şekilde Test Ortamlarını Otomatize Etmek
Tags: testing, linux, bash
Published: 2022-01-21 05:33:29

Gerek evde gerekse iş yerinde test ortamları hazırlamak çoğu zaman bir kabusa dönüşebiliyor. Bazı durumlarda ortam hazırlamak amacın yerine geçip saatleri aldığındaysa hem iş verimi oldukça düşüyor hem de dakikalar alacak bir task yerini saatlere bırakabiliyor.

Bunun uzunca süredir farkında olsam da basit ortamlarımı otomatize edebilmek için sonunda bir adım attım. 

## Şablon Hazırlamak

Bu kısma testlerde sıkça kullandığım GNU/Linux dağıtımlarını listelemekle başladım. Listenin önde gelenleri ise **Pardus 19.5 Server/XFCE**, **Pardus 21.0 Server/XFCE** oldu. 

Bu dağıtımlar için ilk adımda sıklıkla ihtiyaç duyduğum gereksinimlerim ise,

- SSH, git, dbus paketlerinin kurulu olması,
- Şablonu her klonladığımda basitçe hostname değiştirebilmek,
- Şablonu her klonladığımda basitçe ip adresini değiştirebilmek oldu.

Paketleri kurmak kolaydı ancak son iki madde için birer betik yazmam gerekti. 

## Debian Tabanlı Sistemlerde Hostname Değiştirmek

El ile yapmak çok kolay da olsa şablonun içerisine yerleştirilecek bir script her ihtimalde işi çok daha kolaylaştıracağından bu iş için basit bir [betik](https://gist.github.com/zekiahmetbayar/dc3ccb633710229475bf522c2ea8dc71) yazdım.

Kullanımı ise şu şekilde;

```
chmod +x hostname_change.sh
sudo ./hostname_change.sh yeni_ip
```
## Debian Tabanlı Sistemlerde Ip Değiştirmek

Bu adımda ise bir ön gereksinim bulunmakta. Şablonun içerisinde bu betiği yerleştirmeden önce bir kez ip adresini sabitlemek gerekiyor. Bunun için [buradaki adres](https://docs.liman.dev/sistem-yonetimi/kurulum/kurulum-sonrasi-temel-ayarlar) kullanılabilir.

Sonrasında [betiği](https://gist.github.com/zekiahmetbayar/73800fd1155abacf658b75a49abf4544) şablona yerleştirip aşağıdaki gibi kullanılabilir;

```
chmod +x ip_change.sh
sudo ./ip_change.sh yeni_ip
```
บันทึก การ Redirect ของ LIFF App
Tags: line, liff
Published: 2022-01-21 05:31:14

ช่วงนี้วุ่นๆกับการทำ LIFF แล้วติดปัญหาเวลามี parameter แล้วงงกับพฤติกรรมของมันเวลา Redirect
ทาง Line เค้าก็ทำ Video กับ Document อธิบายไว้แล้วแหละ แต่ก็ยังไม่ค่อยเข้าใจอยู่ดี เลยต้องลองด้วยตัวเอง

โจทย์ก็คือ เรามี LIFF Url แบบนี้

```
https://liff.line.me/1656449211-9Kym0GQ7
```

เวลาใช้จริงเราก็อยากจะแนบ query parameter เข้าไปด้วย แบบนี้

```
https://liff.line.me/1656449211-9Kym0GQ7?template_id=1
```

เมื่อเราเปิด LIFF จากใน line จะเจอว่า มีการเรียกมาที่ /?liff.state=%3Ftemplate_id%3D1 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gjmeel0fxd33yaagmpj.png)
 

เมื่อทำการ initialize สำเร็จ จะมีการเรียกเข้ามาอีกครั้งที่ /?template_id=1 และ สามารถอ่านค่า query param ได้

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki5scyen0ktn16gw14jc.png)
 
สรุปว่า query param ไม่ได้หายไปไหน แต่ต้องอ่านให้ถูก ถ้าจะอ่านจาก redirect ครั้งแรก มันจะถูก encode มาใน liff.state
แต่ถ้าจะอ่านจาก redirect ครั้งที่สอง ก็อ่านจาก URL ตามปกติ
omegaide
Published: 2022-01-21 05:27:50

It has been **an year** since I started learning java swing and developing an **IDE** from scratch along side
(just for fun:-)).

I love Open Source, [here's the link to the repo](https://github.com/omegaui/omegaide)

See it in action [here](https://omegaui.github.io/omegaide)

The IDE currently can behave both as a fully integrated java IDE and as an **instant** IDE for editing, compiling and running any other programming language.

- It is based around the **principle of simplicity**
- It has a **tiny core** thus, uses the least possible memory.
- It has its own plugin API and some cool plugins like **vibencode**.
- It has its own highly flexible UI Elements.
- Blazing Fast Dynamic Compilation for Java

What's in progress?

- Complete wiki page having instructions on using the IDE.
- VCS Integration
- Gradle/Maven Integration
- Refractor
React Hooks: useState()
Tags: react, javascript, beginners, programming
Published: 2022-01-21 05:19:17

**What are React Hooks?**
They are functions in React that allow you to add react functionality to function based components.

**What is the useState hook?**
The useState hook is used to add state to a function-based component. The syntax will follow a common pattern:

```js
const [listEntry, setListEntry] = useState('')
```
- `listEntry` is the state variable.
- `setListEntry` is the function used to edit the state variable. Note, you should only edit the state variable through this function.
- `useState('')` is setting the initial value of the state variable. In this case, when `listEntry` is initialized, it equals an empty string.

This example lets you enter a value, then add it to a bulleted list:
```jsx
import { useState } from "react";

const App = () => {
  const [listEntry, setListEntry] = useState('');
  const [listEntries, setListEntries] = useState([]);

  const handleInputChange = (e) => {
    setListEntry(e.target.value);
  };

  const handleAddButtonClick = () => {
    setListEntries((listEntries) => [...listEntries, listEntry]);
    setListEntry("");
  };

  return (
    <div>
      <input type="text" value={listEntry} onChange={handleInputChange} />
      <button onClick={handleAddButtonClick}>Add</button>
      <ul>
        {listEntries.map((entry) => {
          return <li>{entry}</li>;
        })}
      </ul>
    </div>
  );
}
```

- `const [listEntries, setListEntries] = useState([]);` we are creating a value `listEntries` and initially setting it as an empty array. This will hold our list items.
- `<input type="text" value={listEntry} onChange={handleInputChange} />` each time you enter a character in this input, the `listEntry` variable is being updated to what you are typing.
- `<button onClick={handleAddButtonClick}>Add</button>` when clicked, the value of `listEntry` is being appended to the `listEntries` array.
- `{listEntries.map((entry) => {return <li>{entry}</li>;})}` the values in `listEntries` are being rendered in a bulleted list.


More information can be found in Reacts official documentation: [https://reactjs.org/docs/hooks-state.html] (https://reactjs.org/docs/hooks-state.html)

Leave a comment if you have any feedback or questions.
Types vs. assertions
Tags: types, assertions, guarantees, code
Published: 2022-01-21 05:04:56

---
title: Types vs. assertions
published: true
description: 
tags: types, assertions, guarantees, code
---

**Types are build-time guarantees, assertions are run-time guarantees.**

Do we software developers perhaps emphasise the former a little too much and the latter not quite enough?

One way assertions could help is:

**Better error messages**

Quite often an API call will return some value which we weren't expecting. It will fail with a cryptic message, e.g. about some value not being a valid number. And a mile-long stack trace. It's difficult and annoying to debug these errors.

Imagine if we added an assertion, which would run on the API response, and would report a more developer-friendly error message.

E.g.:

```typescript
function assertEmployeeIdIsNumber(id: string) {
  if (!isNaN(id)) {
    throw new Exception(
      `Employee id '${id}' is not a valid number."
    );
  }
}
```

Now we can much more quickly & easily pinpoint where in the code this error happened, why it happened, which Backend endpoint caused it and how it could be fixed.

What do you think?
Mouse Auto Click Script
Tags: python, beginners, script
Published: 2022-01-21 04:54:36

Last year I faced this _Google Colab_ issue wherein during my model training time(which took over 6 hours), my notebook kept disconnecting due to inactivity.
Wrote this small script to keep my session and in turn my system active.

```
from pynput.mouse import Button, Controller
import time

mouse = Controller()

while True:
    mouse.click(Button.left, 1)
    time.sleep(30)
```
Google Drive Beginners Guide: Tips and Tutorials
Tags: googledrive, tips, cloudstorage, tutorial
Published: 2022-01-21 04:54:03

## What is Google Drive?

Google Drive is a popular cloud storage service that is powerful and easy to use. However, if you're new to cloud storage and haven't used competitors like Dropbox or Box, learning how to use Google Drive can be overwhelming. This guide will help make it easy. If you don't already have it on your phone, also click the download buttons below to download the app for Android or iOS.

## How Google Drive works?

To get started with Google Drive, first the end user must create or sign in to a Google account. The end user then types [drive.google.com](drive.google.com) into his or her browser. Then, he or she clicks My Drive and sees all of his or her Drive folders. Then, the user can either upload files from his or her computer or create files in Google Drive. Alternatively, the end user can download an app to his or her device. Once the device is connected to the internet, the user can access his or her Drive from within the app. Files that the user adds to one Google Drive folder are available through the Google Drive web app or the Google Drive folder on each device.

## What are Docs, Slides and Sheets?

Google Drive's suite of office applications comprises Google Docs, Google Slides and Google Sheets. The suite can be compared to Microsoft Office's word processor, presentation and spreadsheet programs. However, Google Docs lacks some features that those Microsoft Office programs have. The suite is simple, collaborative, and free. Each application enables users to create and edit documents, presentations and spreadsheets that they can store in Google Drive. Users can access the apps on the web using browsers including Google Chrome, Microsoft Internet Explorer, Edge, Mozilla Firefox, Apple Safari and Opera. There are also mobile apps for Google Android and Apple iOS. Each application also enables users to save, edit and share files in Microsoft Office formats.

## Types of supported files

As an online storage service, the primary concern for most cloud storage solutions is space, but the type of files supported may be significant to your users. Thankfully, Google Drive supports a lot of file types, including.jpg,.png,.gif, MPEG,.mov, and.avi - Learn more here.

There are no file size limits on Google Drive. However, there may be limits on what can be stored depending on the type of file.

**Documents:** Up to 1.02 million characters. If you convert a text document to Google Docs format, it can be up to 50 MB.

**Spreadsheets:** Up to five million cells for spreadsheets that are created in or converted to Google Sheets.

**Presentations:** Up to 100MB for presentations converted to Google Slides.

All other files: Up to 5TB.

This is all we have to get started using Google Drive. Follow this [gdrivetips.com](https://gdrivetips.com) to learn more about google drive tips and tutorials.
How To Run Jupyter Notebooks Locally In A Docker Container
Tags: python, jupyter, docker, beginners
Published: 2022-01-21 04:52:56

We use Jupyter Notebook to quickly run and test simple Python scripts and entire Jupyter notebooks. But installing the Jupyter Notebook on our local PC can be quite redundant if we do not use it often. For that kind of situation, we can run Jupyter Notebook in a Docker container without installing anything, at all.

Just open a new terminal window and run the following command. If you need to access Jupyter through a different port other than default 8888, you can mention it like `-p 1234:8888`.

```
docker run -p 8888:8888 jupyter/scipy-notebook
```

A few seconds later, you will be able to see a URL something similar to below in the terminal. Directly open it or copy and paste the complete `http://127.0.0.1:8888/?token=9e880…` URL in the browser.

```
[C 10:16:14.004 NotebookApp] 
    
    To access the notebook, open this file in a browser:
        file:///home/jovyan/.local/share/jupyter/runtime/nbserver-7-open.html
    Or copy and paste one of these URLs:
        http://127.0.0.1:8888/?token=9e88021ada57b03fda0a548c9e88f3f5fd6a1ced4ce6405e
```

Now you should be able to use the Jupyter Notebook.

## Make Jupyter Notebooks Persist With Docker Volumes

By default, the files you create with Jupyter Notebook such as `ipynb` and `txt` will **NOT** persist in permanent storage. That means, when you stop or remove the Jupyter Notebook Docker container, all the files you created will be permanently lost and will not be able to recover. But we can easily attach an external directory in the host as a Docker volume to the container so we can easily access the project files. For that, create a directory.

```
mkdir work
```

At this moment, the Jupyter Notebook Docker container will not be able to write files into the directory. Run the following command to change the ownership of the directory we created. After that, the Jupyter Notebook Docker container will get full permission to read and write files into the directory.

```
chown -R 1000 work/
```

Now run the following command, make sure to mention the full path to the directory you created.

```
docker run -p 8888:8888 -v /full/path/to/work:/home/jovyan/work jupyter/scipy-notebook
```

## How To Fix “ModuleNotFoundError”

When you start to work with many notebooks, occasionally you might an error message similar to this.

```
ModuleNotFoundError: No module named 'tensorflow'
```

Under that kind of situation, install the necessary modules by adding them all at the top as a new cell. After running that newly added cell, make sure to restart the notebook kernel to apply changes.

```
conda install tensorflow keras
```

Visit [Jupyter Docker Stacks](https://jupyter-docker-stacks.readthedocs.io/en/latest/using/common.html) for more information about available features.

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-run-jupyter-notebooks-locally-in-a-docker-container) for more related content.
World-famous GTK themes for Linux
Tags: linux, opensource, ubuntu, tutorial
Published: 2022-01-21 04:50:46

Have you ever wondered about the most popular GTK themes for Linux? The themes, that are famous around the world. The themes that people use no matter where they live. Users can be from India, The United States, Russia, Brazil, France, Spain, Japan, or from some other country.

So don’t you wanna know what are the famous [Linux GTK themes](https://linuxh2o.com/category/themes/) among them?

To answer that curiosity, I have written this article. Below you will find the top 5 GTK themes for Linux which are being used by users around the earth. So let’s get started!

**1. WhiteSur GTK Theme**
Like many other themes, the WhiteSur GTK theme is inspired by macOS. As we all know Apple does the design better than anyone else. This theme is based on macOS Big Sur. It takes inspiration from it and tries to convert the design system to Linux GTK based applications. I have tried WhiteSur on a Gnome desktop and it looks fabulous.

I’m not that much of an apple fan but the look you get is just amazing. It will make people believe that you are on a mac. I don’t prefer the apple icons on Linux though, they feel odd.

The developers update the theme very often to keep up with the modern design and fixes.

[_Download Link Below_]

**2. Nordic GTK Theme**
The Nordic theme has its own glow to it. The GTK theme usages the Nord color palette which gives it a dark gray look. When you use your computer it provides a matte finish to it.

Apart from that, the colors are eye comforting so if you’re someone who usages the computer for a long period of time then this theme can be a good choice.
The theme is also updated to support both GTK 3.0 and GTK 4.0. You can get it from the links below.

[_Download Link Below_]

**3. Sweet GTK Theme**
Sweet is a GTK gradient candy. You will love the color contrast and darkish combinations with a rainbow-like finish. This theme is inspired by space and planets which you will notice in the naming as well.

Sweet comes with many options, light, dark, and even with different accent colors. These are the options but you can go with any one of them they all are gorgeous.

[_Download Link Below_]

---

👉 Read the complete article on LinuxH2O.com
[World-famous GTK themes for Linux](https://linuxh2o.com/world-famous-gtk-themes-for-linux/)

🎦 You can also watch the video guide on Youtube to get actual themes demonstration.
{% youtube ru_ECOS-qg4 %}


_Disclaimer_
I have used a fairly popular metric for the themes and it is the number of downloads the listed GTK themes get on the gnome-looks. The list doesn't follow any order whatsoever, just look around the themes and pick one for your Linux distribution.
Using React-Icons in Reactjs
Tags: react, bootstrap, icons, fontawesome
Published: 2022-01-21 04:49:00

I have found that the best way to incorporate icons in your code is by using react icons. They have a variety of different icons, ranging from bootstrap icons, Font Awesome icons, ant design icons and BoxIcons to name a few out of many more. 

The installation process is fast and easy. 

Install by typing 
```
npm install react-icons --save
```
 in the terminal for your project. 


Once react-icons is installed, you will need to import it into the page where you want to use the icons.

For example:
```
import { FaGithub } from 'react-icons/fa';
```

Once you have imported you need to declare the icon in the code with a self-closing tag. 

For example:


```
function App() {
  return (
    <div className="App">
     <h2 align="center">Hello world!</h2>
     <div align="center"><FaGithub/></div>
    </div>
  );
}
```
The result:

![react-icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt48im4ifmi3glgkv5je.png)


One thing to keep in Mind! 

Whenever you are importing an icon make sure you are addressing the correct icon, whether it be from Font Awesome(fa) or bootstrap icons(bs). The icons will not work if you use a bootstrap icon and import it as an "fa" icon. 

For example:

When importing from 'react-icons/fa' the "fa" at the end is what indicates where the icon is coming from. In this case Font Awesome. 

The great thing is that at the top of the documentation it gives you the proper import method for the type of icon you want to use. 

Such as follows:

Bootstrap Icons
```
import { IconName } from "react-icons/bs";
```
Font Awesome
```
import { IconName } from "react-icons/fa";
```

Simply replace the IconName with the icon of your choosing and you should be all set!

All documentation for this can be found here:

[React-Icons](https://react-icons.github.io/react-icons)

This is all information that I found to be helpful as a new developer and took me some time to figure out how it all worked. After several failed attempts, I thought I'd share my experience and hope to help someone else looking for an easy way to add icons to their code! 

Best of luck in your journey!

-Wensy
New Years Resolution - Dev Log 11
Tags: webdev, beginners, programming, computerscience
Published: 2022-01-21 04:42:12

Personal note: What up, back at it again with the new year's dev log. I started the node portion of the backend 🥳. (had to throw in the cringe emoji). My UI video got 16 views baby, lets gooooo. Not exactly big numbers but I honestly only expected like 10. In other news, I have an interview tomorrow with a school district near me. The job is essentially IT. It pays decent and has good benefits but since I have no professional IT experience, I doubt I will land it. Either way, I am gonna be making enough money at the end of the year anyway via my job board that I will not have to worry about it.

I have actually made some UI changes today. I know I said that it was done for now, but I think the changes I added were necessary. Plus the logic I was using to conditionally render the different screens was a nightmare, so I needed to do some refactoring. More information is in the stand-up below.

If you have not checked out the video discussing the basic UI, please do:

https://www.youtube.com/watch?v=jvH9iTYzUbQ



Idea 1 - Job Board: As I said earlier, I stated on the Node portion. This was literally just setting up the basic routes and making sure that the Axios requests from the front end had the correct payloads. So now I know that in the backend I am getting all of the information needed to perform the business logic. The front end needed some serious refactoring. The logic I was using to conditionally render the different screens was convoluted. Now it is just as simple as a few flags. I also added a filter that allows the user to change how the jobs are sorted. That seems like a pretty basic thing, but I did not think of it till last night. I am also going to add a screen where you can remove a job listing you put up. I imagine that companies do not want more candidates if they have already hired one.

Idea 2 - Paid Plugins: Scratched

Idea 3 - SaaS: I have a solid idea for a SaaS company I believe, but will not start on this till my job board is out and functional, even though I'm really excited about it.

Idea 4 - Paid API: Just learned about how you can build an API and market it easily through rapid API. I am thinking that this might be something I want to try.
ELM Intro course Moleculer callback error
Tags: elm, moleculer
Published: 2022-01-21 04:36:43

I’ve just completed the intro course by Richard Feldman and I encountered a problem in part7 and beyond with the moleculer server.  I am getting this message when I commit the “sign up” form:

{name: "MoleculerError", message: "No callback function was given.", code: 500}
code: 500
message: "No callback function was given."
name: "MoleculerError"

Appreciate hearing from anyone who has experienced the same and has a fix or can suggest where I should look.

Thanks