teleren/devto huggingface dataset:
Using Cron keep your eyes in check
Tags: bash, linux, wellbeing
Published: 2021-09-26 16:42:57

## basic syntax for cron
a typical cron job looks like this 
```
# m h  dom mon dow   command
  * *   *   *   *   /usr/bin/sh ls
```

* stand for wildcard
this is not a cron tutorial this is just how i use it. 

## eyes.sh script
the bash script looks like 
```
#!/bin/sh
export DISPLAY=:0
notify-send "EYES CHECK" "Look away for 15 seconds"
```
without line no 2 it wont work as it sets the display for notify-send. I am using notify-send as my notification daemon. 

make sure that your display is :0 
you can do this with 

```
echo $DISPLAY
```
## setting up crontab
first you will need to make sure cron is running you can do this  by:
```
systemctl status cronie
```
p.s. this is specific to arch based system.

once cron is running you can create/edit cron job with `crontab -e`

then paste the code present below into the window.
```
*/15 * * * * /usr/bin/sh  /home/elnovo/.noti/eyes.sh
```

it runs every 15 min and eyes.sh is the bash script we discussed above. save it. 
you can find the cron jobs currently present by `crontab -l`

## sources
[notify-send doesn't work from crontab](https://askubuntu.com/questions/298608/notify-send-doesnt-work-from-crontab)
Laravel 8: Create a Custom Helper Function
Tags: laravel, php
Published: 2021-09-26 16:38:05

In this article, I will give you an example of the “Custom helper function in laravel“, So you can easily apply it with your laravel 5, laravel 6, laravel 7, and laravel 8 application.

What we will cover:

1. Register Helper in composer.json
2. Get data in controller using helper
3. Get data in Blade File using helper.

**we call all the category table data in the controller and blade file using a custom helper.**

![laravel custom helper function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z2igtvi5x87cliwh3if.png)

**Create a folder and a file :**

In this step, you need to create **app/Helpers/helpers.php** in your laravel project and put the following code in that file:

![helper register in laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0p7l8ebzbf5kzr57tr7.png)

```
 "autoload": {
         "files": [
            "app/Helper/Helpers.php"
        ],

        "psr-4": {
            "App\\": "app/"
        },
        "classmap": [
            "database/seeds",
            "database/factories"
        ]
    },

```

**Regenerate the list of all classes in the app, Hit this command in the terminal.**

```
composer dump-autoload
```

Now we create a function in **Helper\Helpers.php** file to get the **category data from the database using Category Model.**

**app\Helper\Helpers.php**

```
 <?php
  namespace App\Helper;
  use App\Model\Category;

  class Helpers
  {
    #Get Category Data From Category Model
    static function get_catdata()
	{
        $catdata = Category::get();
        return $catdata;
    }
  }

  ?>
```

Now, we can call our function anywhere in the view and controller like this:

**Get data in blade file using helper :**

```
<table class="table">
            @php
            $catData = \App\Helper\Helpers::get_catdata()
            @endphp
            <thead>
               <tr>
                  <th>S.no</th>
                  <th>Category Name</th>
               </tr>
            </thead>
            <tbody>
               @foreach($catData as $key => $data)
               <tr>
                  <td>{{ $key+1 }}</td>
                  <td>{{ $data->name }}</td>
               </tr>
            </tbody>
            @endforeach
         </table>
```
**Output :**

![helper data in blade file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiy7pmvqou4q06d0d5cp.png)

**Get data in controller using helper :**

```
<?php

  namespace App\Http\Controllers;

  use Illuminate\Http\Request;
  use App\Helper\Helpers;

  class TestController extends Controller
  {

   public function categoryList()
   {

    $data = Helpers::get_catdata();
    dd($data);
   }
 }
```
**Output :**

![get helper data in controller](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlcrdiitt9tr3puxbvfn.png)

This article is originally published in : [Custom helper function in laravel](https://8bityard.com/how-to-create-custom-helper-in-laravel-8/)

**Read Also :** [Change the date format in the blade file in Laravel](https://8bityard.com/change-the-date-format-in-the-blade-file-in-laravel/).
Coding Bootcamp - 3 Weeks to go
Tags: bootcamp, javascript, newbie
Published: 2021-09-26 16:30:56

Hi, I'm Rich.

So on Monday 13th September I passed the Northcoders Coding Bootcamp Entry Challenge and was offered a place starting Monday 18th September.

This is pretty much a dream come true for me. I have been tickering with coding for a few years and have been to "tutorial hell" a few times. Recently the stars aligned for me and I applied to the bootcamp. I was offered the chance to complete the entry challenge to show I was ready the the intensive full course.

Here I found my previous tinkering very useful in completing the prep work and in the actual challenge. I realised had actually learned somthing and did know some stuff.

The actual challenge arrived and although nervous, I was very excited. It went really well and I got a "Hard to fault on hardly anything!" from my feedback. I was elated. Immediately I was offered a place starting 18th October so I'm all set 😃

First impressions of Northcoders are positive - very friendly and helpful staff and a great Slack channel to meet other freshers and chat code!

There is a lot of pre-course work to be done so we can hit the ground running on the 18th - can't wait to get started.

I aiming to blog weekly about the pre-course, bootcamp and aftermath - mainly for my own benefit but it may inspire someone else to get coding.
Setup new angular app from scratch
Tags: angular, frontend
Published: 2021-09-26 16:06:06

Hi Guys , here we are going to see how to initiate when we are going to create angular app from scratch,initially i am adding steps for module generation and lazily loaded components inside those components.later you will get the updated on things in same blog.please visit below link and leave comments here. if you have any query.
Blog link is here https://dotheblog.herokuapp.com/user/viewBlog/Setup_a_new_Angular_project_from_scratch./615078c4c74b9e0016ab0031
Make Smart Look Your Git bash in VS Code and everywhere
Tags: gitprompt, terminal, customizegitbash, gitbashedit
Published: 2021-09-26 15:54:37

![gitbash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kt130iya2yseliv14r0d.PNG)

### 1. Go to the >> <a href="https://raw.githubusercontent.com/stacksagar/bit-bash-edited-file/main/git-prompt.sh" target="_blank" >link</a>
#### copy all code

### 2. Then Go to >> C:\Program Files\Git\etc\profile.d 
#### open git-prompt.sh file and paste all code 

#### Look like this 👇 edit whatever you want!!!
![gitbash code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abi3z1sqiiyeff2zh1s0.png)
Version Control
Tags: devops, github, git
Published: 2021-09-26 15:46:48

**In the previous post I mentioned the stages of DevOps and the first being Version Control**
>Version Control

_It is basically all things managing the **source code**._



**Version control is of 2 types.**
1. Centralized Version Control
2. Distributed Version Control

**1. Centralized Version Control**

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

 

>In centralized version control there is one main repository and multiple users commit and update in that repository. 

**All changes in the file are tracked in the centralized repo/server**
>In case you lose your central repo, your whole source code will be gone and this is one of the major drawbacks of centralized version control system.

*examples of centralized version control*
  * Tortoise SVN
  * Perforce
  * CVS

**2. Distributed Version Control**

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

  

>To overcome the drawbacks of **centralized Version Control** ,distributed version control was introduced.
In this type of version control, a developer clones the main repository of the project and saves it to his/her local hard disk
(disk space is not a matter of concern here as disk space is so cheap that storing many copies of a file doesn’t create a noticeable dent in a hard drive’s free space.)
After cloning the central repo, user commits and updates in the local repo and then do the push pull events to central repo.
If the data on central server is lost, there stays a sense of relief because of repo of project being present in the machine of developers.

**There are plenty of advantages of using distributed version control system over centralized one.**

*Examples of distributed Version Control*

* Git
* Mercurial
* Bazaar





We'll talk about the pros and cons of using both in the next post.

Let's connect on [Linkedin] (https://www.linkedin.com/in/yellowgem/)

Stay Kind.
MetaMask - Internal JSON-RPC error 
Tags: node
Published: 2021-09-26 15:33:32

i was following nader full stack nft marketplace, where i can mint nfts but when i try to buy it gives me this error :MetaMask - Internal JSON-RPC error 

code: 3, message: "execution reverted: Please submit the asking price in order to complete the purchase", data:

along with this:Uncaught (in promise) 

any solution
Can a machine be a CSS artist?
Tags: css, machinelearning, webdev, typescript
Published: 2021-09-26 15:17:51

There is tons of posts online on how to make impressive pictures and animation with nothing but html and css. It got me thinking, what if I could use machine learning to teach my computer to do that automatically. That's what this video is about.

{% youtube TwT1EgbOHi8 %}
Memoization rawan bug?
Tags: react, programming, javascript, webdev
Published: 2021-09-26 15:13:09

Dulu pernah nyoba ngefix bug siang dan malam, ternyata cuman kesalahan memoization doang. 

Nah sekarang sambil menahan emosi, saya mau share tentang konsep memoization sendiri dari JavaScript terutama ReactJS. 

Nah memoization ini sendiri apa sih? kok kayaknya rawan bug?
Nah jadi gini, setiap function itu ada proses re-creation (pembuatan ulang) pada setiap kali kita rerender Document Object Model (DOM), misal kita punya functionA, nah si functionA ini akan direcreate setiap kita rerender.

![memoiszation](https://i.imgur.com/bt698Mz.jpg)

Nah ini tu gamasalah kalau functionnya cheap alias dalemnya gaterlalu banyak logic logic rumit,  yang jadi masalah itu kalau semisalnya ada logic logic rumit yang makan waktu jika kita komputasi ya pokonya expensive lah si function itu.

Nah, kalau dah terlalu makan waktu, biasanya kita disarankan melakukan memoization (caching si result dari functionnya). Kalau untuk ReactJS, kita disediain function bawaan (istilahnya adalah Hooks) useMemo dan useCallback.

![code](https://i.imgur.com/JzdOs4v.jpg)

Fungsinya itu untuk performance optimization, misal kita dah melakukan komputasi yang rumit, hasil dari komputasi tersebut bisa disimpan sebagai cache. dimana jika kita butuh result dari komputasi  tersebut untuk kedua kalinya, kita tinggal mengambil resultnya tanpa me-recreate function tersebut.

Nah, konsep ini lumayan advance, dalam artian kalau gak bener gunainnya bisa menghasilkan bug. 

Contoh kita memutuskan untuk mememoize functionA, terus kita lupa atau tidak tau kalau functionA ini hasilnya bisa berbeda. Yaa, alhasil muncul bug yang tidak kita duga.

Nah kita perlu memutuskan sebuah kondisi kapan si function ini akan di recreate biar hasilnya susai dengan harapan kita.
Kalau di ReactJS, dalam Hooks useMemo / useCallback ini kita bisa mendefinisikan dependencies (ketergantungan), dimana jika value dari dependency ini berubah, kita akan recreate function secara otomatis, jika dependency ini valuenya tetap, maka kita akan memanggil result yang sudah kita cache.

Begitulah, jadi walaupun sangat berguna kalau untuk masalah cache mencache diharapkan hati hati.
Docker + Portainer: gerenciando containers a partir do navegador
Tags: docker, containers, portainer
Published: 2021-09-26 15:07:50

Para quem deseja ter uma interface gráfica para gerenciamento de **containers** o [**Portainer**](https://www.portainer.io/) é uma boa escolha. Pelo navegador podemos acessar e gerenciar de recursos como **imagens** e **containers Docker**, **networks** e **volumes**.

O objetivo deste artigo é demonstrar a instalação, bem como os primeiros passos gerenciando localmente **containers** e outros recursos do **Docker** por meio do **Portainer**.

1 - Instalar Portainer com Docker no Linux

A instalação do **Portainer** é bem simples, primeiramente temos que baixar a imagem do **Portainer** pode ser baixada através do comando:

```javascript 
docker volume create portainer_data
```
O comando a seguir permitirá a criação de uma instância para execução do **Portainer** via **container Docker**:

```javascript 
docker run -d -p 8000:8000 -p 9000:9000 --name=portainer --restart=always -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer-ce
```
Em que:

* O parâmetro **-d** determina que o **container** em questão será executado como um serviço em background;

* O atributo **-p** indica a porta **(9000)** através da qual acontecerá a comunicação com a aplicação Web correspondente ao **Portainer**, tendo neste caso se mapeado para o mesmo número da porta **default (9000)** deste gerenciador;

* Já o atributo **--name** especifica o nome do **container** a ser gerado **(portainer)**;

* A instrução **--restart always** permite reiniciar o **container** do **Portainer** automaticamente;

* A configuração **-v /var/run/docker.sock:/var/run/docker.sock** permitirá que se gerencie um ambiente **Docker** local;

* Temos indicada ainda a imagem utilizada como base para a geração do **container** **(portainer/portainer-ce)**;

Acessando a URL **http://localhost:9000** no navegador aparecerá a tela inicial do **Portainer**, nesse primeiro acesso vai pedir a definição de um usuário e senha.

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

Cadastrado o usuário que atuará como administrador o próximo passo agora será escolher o ambiente de gerenciamento vamos escolher **Docker**.

Aparecerá então a tela inicial do **Portainer**:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxssonmy7q1hr54zeb5f.png)

Será exibido um resumo (Dashboard) contendo informações sobre **containers**, **imagens**, **networks** e **volumes** existentes no ambiente considerado:

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

Se acessamos os **Containers** temos a lista de diversos **containers** disponíveis no ambiente local, incluindo os status dos mesmos (ativos ou não):

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

Como podemos observar temos varias opções de gerenciamento do **Docker**, para quem procurar uma interface mais amigável o **Portainer** é uma boa escolha.
Apakah Software Developer / Engineer benar benar masuk "High Demand"
Tags: programming, discuss, career, devjournal
Published: 2021-09-26 15:00:46

Kali ini saya akan membahas topik yang sedikit unik, ya terkait pekerjaan Software Engineer / Developer / Programmer atau apapun itu.

Mari kita hadirkan beberapa statement terlebih dahulu :
1. Pekerjaan yang High Demand itu banyak lowongan kerjanya.
2. Jika banyak lowongan kerjanya, berarti cari kerjanya itu mudah
3. Software Engineer adalah pekerjaan yang "High Demand"
4. Faktanya, banyak lulusan Univ / SMK tentang Software Development mengeluh "Sulit" menemukan pekerjaan.

Jika kita benturkan statement ke 1 2 3 dengan 4 akan muncul paradox, perusahaan sulit mencari orang, sendangkan orang orang sulit mencari kerjaan.

Mendengar kata **"High Demand"** mungkin menyebabkan beberapa orang tua mengakatan kepada anaknya 
"Udah masuk jurusan IT aja, biar hidupmu gampang. Lagi banyak dicari pekerjaannya" dll. 
Atau menyebabkan Banyak Univ membuka jurusan Informatika.

Padahal kata "**High Demand"** itu bisa berupa 2 hal :
1. Pekerjaannya banyak dan butuh banyak orang
2. Pekerjaanya b aja stoknya, tapi untuk dapat pekerjaan tersebut lumayan "susah"

### My Conclusion ?
Software Engineer itu stoknya biasa aja, tapi untuk dapat pekerjaannya itu untuk "Fresh Grad" lumayan susah, kecual kalau kamu berusaha dengan sungguh sungguh.

> Software Engineer itu menurut saya suatu pekerjaan yang mewajibkan
> kita membangun kebiasaan / hidup berpusat pada pekerjaan tersebut.
> 
> Contoh jika kamu mau menjadi Software Engineer, kamu tidak bisa hanya
> diam saja menerima suapan dari materi materi yang diajarkan jurusan.
> Ngk bisa gitu...
> 
> Kamu harus membangun kebiasaan untuk meluangkan waktu belajar hal hal
> baru, atau mengasah kemampuan di waktu senggangmu... 
> 
> Dan kebiasaan ini akan sangat berat dibangun jika kamu tidak memiliki
> passion dalam Programming, atau kamu hanya mau Uangnya saja dari
> pekerjaan tersebut.


Iyaa, kalau boleh dikatakan, walaupun masuk **"High Demand Job"**

Jangan kira dirimu bisa bersantai saja, menikmati nikmatnya kopi ketika senja setiap hari, menikmati hari hari dengan senyuman, tau tau ketika kamu lulus secara ajaib kamu mendapatkan pekerjaan sebagai Software Engineer dengan hanya menunjukan Calculator App buatanmu... Jangan Harapp 😅😅
Pro VSCODE Themes For Pro Developers
Published: 2021-09-26 14:09:57

Hey everyone!

A lot of developers, including me, like darker environments. Here are some cool / pro themes for vscode. 

But before that please subscribe to my channel on youtube i make coding tutorials (Html, CSS, Javascript & Nodejs). Also stay safe and be happy 💖😊

# Theme One - One Dark Pro

Ofcourse guys this theme is legend, one of my most favourite theme and also it is one of the most popular theme of vscode many people use this theme. 

- **Total Downloads** - 4,258,735
- **Download Link** - [Click Here](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)

![Alt Text](https://cdn.jsdelivr.net/gh/binaryify/onedark-pro/screenshots/normal.png)

# Theme Two - August Theme

Now this theme is also pretty cool it comes with many colors ( 6 colors ). Here - 

- **Total Downloads** - 13,437
- **Download Link** - [Click Here](https://marketplace.visualstudio.com/items?itemName=inci-august.august-themes)

### Drawbrdige - August Theme

![draw](https://raw.githubusercontent.com/inci-august/august-themes/master/imgs/august-drawbridge.png)

### Radical - August Theme

![draw](https://raw.githubusercontent.com/inci-august/august-themes/master/imgs/august-radical.png)

### Material Ocean - August Theme

![draw](https://raw.githubusercontent.com/inci-august/august-themes/master/imgs/august-material-ocean.png)

### Arstotzka - August Theme

![p](https://raw.githubusercontent.com/inci-august/august-themes/master/imgs/august-arstotzka.png)

### City Lights - August Theme

![p](https://raw.githubusercontent.com/inci-august/august-themes/master/imgs/august-city-lights.png)

### Nord - August Theme

![p](https://raw.githubusercontent.com/inci-august/august-themes/master/imgs/august-nord.png)

# Theme Three - Snazzy Operator

This theme is the best theme to use with the font named operator mono, well operator mono is a paid font but the theme is free. but there are many alternatives for operator mono

- **Total Downloads** - 79,444
- **Download Link** - [Click Here](https://marketplace.visualstudio.com/items?itemName=aaronthomas.vscode-snazzy-operator)

![p](https://raw.githubusercontent.com/aaronthomas/vscode-snazzy-operator/master/preview.png)

😊 Thankyou for giving your time to read this blog hope you found it useful and interesting

I have my own youtube channel please 🙏🙂subscribe

https://youtube.com/codingfire?sub_confirmation=1
React Native UI Kitten Library Basics
Tags: reactnative, beginners, android
Published: 2021-09-26 13:41:33

##Components

###1) ApplicationProvider

It is a top level Wrapper for your Application.Generraly, wrap the root level of your App
```
export default () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    <HomeScreen />
  </ApplicationProvider>
);
```
[Docs for ApplicationProvider](https://akveo.github.io/react-native-ui-kitten/docs/components/application-provider/overview#applicationprovider)

###2) Layout

Layout is just like the View element of the React Native or Container in the Native Base. Layout has some styling as per the Level of the Layout you are using, and its Background color changes as the theme of the app changes. Wrap each screen with the Layout as it will come usefull when you later on add theme to your application.
     There are 4 levels of the layout and can be configured using the __level__ props.

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

When we changes the theme of the app, then automatically the background changes to dark theme.

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

Example Code for Layout 

```
<Layout style={styles.layout} level='1'>
      <Text>1</Text>
 </Layout>
```

###3) Text
The text component in the UI Kitten was same as Text in React Native with some basic styling passed via the props. We can have multiple types of text style from __h1__ to __h6__ by passing the props __category__.

```
      <Text category='h1'>H1</Text>
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lij8diagfz94ftae95v.png)
 
###3) Icon
If you had created your application by using ui-kitten template, then you can use the Icon otherwise you need to add  [an additional package](https://akveo.github.io/react-native-ui-kitten/docs/guides/icon-packages).

To use Icon component, first you need to import the Icon like below
```
import { Icon } from '@ui-kitten/components';
```
and then you need to just pass the Icon name,color and size.
```
<Icon
    style={styles.icon}
    fill='#8F9BB3'
    name='star'
  />
```

You can also add icons to button by passing __accessoryLeft__ or __accessoryRight__ props to the Button component of the UI Kitten

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t1d2msxbfb0b4osr9j3.png)
 
```
<Button
      style={styles.button}
      accessoryLeft={HeartIcon}
      onPress={toggleMenu}>
      PRESS ME
 </Button>
```

```
const HeartIcon = (props) => (
  <Icon {...props} name='heart'/>
);
``` 

###3) Button
Button can be used in the UI kitten by importing component. We can pass some of the props like __appearance, status,  size__

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

```
<Button  size='medium' appearance='filled'  status='warning'>
      FILLED
</Button>
```
[Button Docs](https://akveo.github.io/react-native-ui-kitten/docs/components/button/overview#button)

More component will be dicsussed in the Next part of this blog.

Thanks for Reading.
5 GitHub repositories that can help you in writing better CSS code 
Tags: css, html, webdev, style
Published: 2021-09-26 13:14:46

1. Spin Kit

- A collection of loading indicators animated with CSS

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

1.Hover

- A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images, and so on

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

1.Magic of CSS

- A CSS course to turn you into a magician

https://github.com/adamschwartz/magic-of-css
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k81ibdnfi5k6wbzhn0x.png)

1.Awesome CSS

- A curated contents of amazing CSS

https://github.com/awesome-css-group/awesome-css
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w67ccl5k5s76odav6u8i.png)

1.CSS Pro Tip

- As the repo name suggests, In this repo you'll find a lot of tips and tricks that can help you to become a CSS pro

https://github.com/AllThingsSmitty/css-protips
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/879xx7rydj2l114noqt5.png)