teleren/devto huggingface dataset:
JavaScript Functions Explained - Part 1
Tags: javascript, programming, functional, webdev
Published: 2022-01-16 12:51:09


Easy to understand example codes, animations (hand made by me). This article and videos is designed for both "Desktop" & "Mobile" users.

{% youtube https://youtu.be/-EYzUJE2tWo %}

If you are a visual "mobile" person, the above video is for you.
In JavaScript Variables, we learned where&how to stick your Data. But what about the actions that manipulate the Data? We need functions.

---

> Table Of Contents:

1. What is a function ? (General idea of a function)
2. JavaScript Functions
3. JavaScript Functions - Call/Invoke Function

---

## What is a function ? (General idea of a function)
There are many different explanations for the same thing. But I'll take my own approach. Because, that's how I personally learn myself.
Instead of talking about specific functions. First, let's talk about the **general idea of a function**.

You can think of a function like a machine that :

1. Can **Take Input**
2. **Process** it
3. And **give output/result**


![general idea of a function. How a function works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drcliphdry73b1gjji4d.png)

---

## JavaScript Functions
A JavaScript function, is a block of code designed to perform a particular task. They also can be reused & modified.
A JavaScript function is executed/activated when something calls/invokes it.

To create a function, write the keyword <u>function</u>
Then give it a name like <u>doSomething</u> or whatever you name it (be descriptive).
 Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

At the end of the function name use **()** a pair of parenthesis **<u>doSomething()</u>**
A set of curly braces **{}** at the end like so **<u>doSomething () {}</u>** to define the block, that the function will execute when its called/invoked.

Inside there, I'll just print my name to the console, to make it a simple function.

Example Code:

```
function doSomething() {
console.log("Lia Sue");
}
```
If you check the console, nothing hapens. That's because we actually have to invoke/call the functions.

## JavaScript Functions - Call/Invoke Function
The way we invoke or call a function is, we have to use or type its name. After we declare/create the function. At the end of the name put a pair of parenthesis like so **<u>doSomething ();</u>**

```
// Declaring a function 
function doSomething() {
console.log("Lia Sue");
}
// Invoke / call function
doSomethiing();
```

---

Hope this picture will help you visualize
![JavaScript functions explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4wbn614yrldubw22yye.png)

JavaScript Functions — Video for Desktop users

If you are reading it from a Desktop device and find vertical video annoying. Here’s a big video designed for Desktop, Enjoy!

{% youtube https://youtu.be/MJC3G9YN_yw %}
How to JSON Object value without using Map
Tags: react, javascript
Published: 2022-01-16 12:45:08

Eg: 
const settingsIcons = [
    { id: 1, icon: "faUserCog", className: "fa-rotate-0" },
    { id: 2, icon: "faUserCog", className: "fa-rotate-360" },
  ];

In the props, i've id:1 already.. So, i can filter the 1st Object
{ id: 1, icon: "faUserCog", className: "fa-rotate-0" },
    
but not able you pick : icon: "faUserCog"

**Can you suggest, how to read this value :  icon: "faUserCog"**
Why is software development so hard?
Tags: beginners, programming, productivity, career
Published: 2022-01-16 12:29:50

**Why is #software #development so hard?**

It was 11pm(late night) and my phone rang. Initially I was wondering, "who would call me this late?" I did not pick the call.

Next morning, I called back, and this was our conversation:

Me: Hello,good morning, sorry I missed your call yesternight.

Caller: Yes, good morning, my name is Richard, I am a corp member(service to our country by postgraduate students), I got your number on a WhatsApp group where I noticed you are a #software #developer, and I am interested in #learning. Please can you teach me how to #code?

Me: oh! That is great, yes I am willing to teach you, but I need to know if you are really serious about learning or not.

Caller: Yes I am serious, but I heard software development is hard, please what makes it hard?

Me: Very good, the reason why software development is hard are:

👉 **Keeping up with #technology**: change is the only constant In software, we have to continually keep updated even to maintain a simple codebase.

👉 **Communication**: constant communication between developer, team lead and other is important for keep everyone in the same page

👉**Every line of code is a potential point of failure**: Each line of code would have lots of possible inputs, output and lots of dependencies to deal with. It can be impact or being impacted by other line of code or other external factors

👉 **You are expected to know everything**:
You are expected to know everything as old as Windows MS-DOS  to as new as Windows 11. Software is a vast field and inculcating all the skills is just next to impossible. Online learning and collaboration can be of great help. When everything else fails, Google it!

👉**Time management is difficult**: When you might have planned to implement a feature within one week. One bug can ruin your entire schedule.

These reasons are more on a general terms, when we talk in terms of coding that is a topic for another day.

Caller: wow!, It sound exciting, when we can we start the learning process.

Me: Wow I love your determination.


Comment other why 👇👇
Get to know a DevOps Engineer - me
Tags: devops
Published: 2022-01-16 12:07:13

Hello, 

[Get to know a DevOps Engineer - Mezbaur Rahman](https://www.youtube.com/watch?v=hpHVE1CH1IU&t=1191s ) is my first ever and I must admit, not very good attempt to give a talk about being a DevOps engineer on youtube on a session arranged by [Codebar](https://codebar.io/). A huge thanks to [Kimberley](https://twitter.com/kimberleycook91?lang=en) for giving me the opportunity, 

I would appreciate comments, suggestions or even any criticism.
Git rebase a remote branch in the terminal
Published: 2022-01-16 11:42:03

Hi,
In this article, you will learn how to git rebase a remote branch in the terminal. I am dividing the whole process of rebasing into **5 steps**. Let's understand this with the example below:

You are on a branch named `feature` and you want to rebase this branch onto the branch named `main`.

## **Step 1: Pull the latest changes from the remote of your target branch.**

In the example, the target branch(the branch onto which you want to rebase the `feature` branch) is `main`.
As we are currently on `feature`, so first we need to checkout to the `main` and then we will pull the latest changes. 

```
git checkout main
```

```
git pull origin main
```

## **Step 2: Rebasing `feature` onto `main`.**
 ​
When the pull is completed, checkout out to `feature` and then rebase `feature` onto `main`.

```
git checkout feature
```

```
git rebase main
```

## **Step 3: Resolving Conflict**

Sometimes, rebasing a Git branch can result in conflicting changes that need to be resolved before the action can be completed.

When there is a conflict in a file it looks like this:

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

In the above image you can see that Git adds some additional lines to the file having conflict:

- `<<<<<<< HEAD`
- `=======`
- `>>>>>>> updated_address`

You can think of `=======` as the dividing line of the conflict. Everything between `<<<<<<< HEAD` and `=======` is the content of the current branch that the HEAD ref is pointing to, also called as **Current Change**. On the other hand, everything between `=======` and `>>>>>>> updated_address` is the content in the branch being merged, also called as **Incoming Change**.

After resolving the conflict and saving your changes, you need to tell Git that the conflict has been resolved, you can do this with:

```
git add <filename>
```

## **Step 4: Rebase Continue**

Now you can move on with the rebase by:

```
git rebase --continue
```

So, when the rebase is completed. Your branch `feature` is up-to-date with all changes which had been previously committed to the `main` branch.

Alternatively, if you’re unable to resolve the conflicts, or decide you don’t want to move forward with the rebase, then you can **cancel the Git rebase action**, with:

```
git rebase --abort
```

Now your branch is back in the state, as it was in before starting the rebase.

## **Step 5: Pushing rebased code to GitHub**

As you've altered Git history, the usual git push origin will not work. You'll need to modify the command by **"force-pushing"** your latest changes:

```
git push origin feature -f
```
Dev.to Etiquette
Published: 2022-01-16 11:34:50

I am considering the `dev.to` platform might help me learn and progress as a programmer. I would perhaps spend about `400` hours in my lifetime, so it would be worth considering how I will be interacting on this platform.


> How are you using dev.to? 😊


## Heart or Unicorn

💖 - If the article is well written
🦄 - Original thought of the author or you just feel like giving Unicorn
🔖 - Read later or Future reference

### Few citizen tips
1. If someone follows me, follow them back
2. See comments in a positive light, if you can't take time to think through to respond

---

## Do
1. Follow a few tags relevant to my interest scope
2. Write regularly and try to chase insight, not clout
3. Write the topic that I, myself would read or found helpful
4. Regularly choose and read articles that complement your work
5. Treat dev.to as a support for learning a tech stack

## Don't
1. Expect the immediate attention
2. Write very long articles
3. Binge read articles
4. Take pressure to publish often
5. Worry other people publishing really cool content

## Cons
1. Adding anxiety and how many people watched my posts.
2. In case I have some free time, I tend to ruminate over article `stats` again and again

---

## References
1. https://every.to/letter
2. Show your Work! by Austin Kleon
3. https://dev.to/4lch4/whats-with-the---4bdg
Styling a checkbox as darkmode toggle
Tags: webdev, css, scss
Published: 2022-01-16 10:43:41

---
title: Styling a checkbox as darkmode toggle
published: true
description: 
series: Create a dark mode toggle
tags: webdev, css, scss
cover_image: https://images.unsplash.com/photo-1504903271097-d7e7c7f5f7ad?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fGRhcmslMjBtb2RlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60
---

In the first part, we created a checkbox which has the ability to switch our website in darkmode. 
In short, we introduced colors, saved in a central `SCSS` file. With these colors, we created two themes. A dark and a light one. These themes saved the SCSS values as CSS variables.
The checkbox then just switches between the two themes and the variables changing. 

Now we want to throw some CSS at our checkbox to make it fun to engage with it. (Nobody wants to click on a small checkbox on their phones)

So we start with HTML structure of the switch like this:
```html
<label class="switch">
  <input type="checkbox" name="theme_switch">
  <span class="slider"></span>
</label>
```

Now we do a little position and hide the default checkbox:
```SCSS
.switch {
  position: relative;
  display: inline-block;
  width: 68px;
  height: 38px;
  margin: 5px;
}

// hide checkbox
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
```

After that, we style the outside of the slider:
```SCSS
// outside
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
```

For the slider element, we use the pseudo-element `:before` of the slider `span`. 
You can use a normal transition, but I like a slide rubber band animation at the slider. For this, it's best to use a [cubic-bezier function](https://cubic-bezier.com/#.57,1.52,.64,1). To make this all work, two animations have to be created. One for each direction to slide in. These animations together with the bezier function can be used by the animation property.

So we can style it as follows:
```SCSS
@keyframes going-dark {
  100% {
    -webkit-transform: translateX(28px);
  }
}

@keyframes going-light {
  0% {
    -webkit-transform: translateX(28px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

// slider in light state
.slider:before {
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  left: 8px;
  bottom: 7px;
  background-color: white;
  border-radius: 50%;
  -webkit-animation: going-light 0.4s cubic-bezier(0.57, 1.52, 0.64, 1) normal;
  -webkit-transition: 0.4s;
  animation: going-light 0.4s cubic-bezier(0.57, 1.52, 0.64, 1) normal;
  transition: 0.4s;
}

// slider in dark state
input:checked + .slider:before {
  background-color: white;
  -webkit-animation: going-dark 0.4s cubic-bezier(0.57, 1.52, 0.64, 1) forwards;
  -webkit-transition: all 0.4s;
  animation: going-dark 0.4s cubic-bezier(0.57, 1.52, 0.64, 1) forwards;
  transition: all 0.4s;
}
```

Throw it all together, and you should be able to see something like this:

{% codepen https://codepen.io/wgnrd/pen/wvrXPOY %}
Ghostfolio – First months in Open Source
Tags: contributorswanted, finance, showdev, typescript
Published: 2022-01-16 10:32:13

In this article I would like to recap the first months running the open source project [Ghostfolio](https://ghostfol.io), a web-based personal finance management software.

## From 1 to 100 stars on GitHub

When I decided to [publish](https://ghostfol.io/en/blog/2021/07/hello-ghostfolio) the project as [open source software](https://github.com/ghostfolio/ghostfolio) (OSS), I did not know what exactly to expect. In the worst case, nobody would care. And in the best case, the repository would be overrun with contributions. The truth is probably somewhere in between.

In the beginning, it felt quite weird to develop in public where anyone can observe the progress. Stupid mistakes remain visible forever. But this feeling, fortunately, quickly settled. I believe the benefits like all the learning clearly outweigh the drawbacks when you just do it.

At the end of 2021, Ghostfolio reached an important milestone: 100 stars on GitHub.

{% twitter 1470075774640218121 %}

This is really exciting with almost no marketing. I am a technical founder, so I prefer writing code over anything else. But there is so much more to make this project happen: writing documentation, maintaining bug reports and feature requests, supporting users and managing the community, keeping the SaaS running, etc.

Reaching 100 stars will not only attract very early adopters, but also the early adopters. At the same time, the demands and expectations are also increasing.

## What is new?

During the last months, Ghostfolio has transformed from a one man project into a prospering wealth management application with 9 contributors and counting. User feedback has directly shaped the direction of the product development.

These are some selected key features:

* Simplified self-hosting with an [official Ghostfolio docker image](https://hub.docker.com/r/ghostfolio/ghostfolio) on Docker Hub
* Improved import for activities (transactions and dividend)
* Enriched market data for ETFs (region and industries)

## What is coming?

Here is a brief overview of what I am planning in 2022.

The goal remains to offer a simple and solid software to manage personal finances. Thus, the main focus is on the core functionality.

My personal goal is to reach break-even with the Saas offering ([Ghostfolio Premium](https://ghostfol.io/pricing)) and regularly report about the progress and my learnings on this exciting journey.

I have already started to build a [community](https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg) of users. In the future, I would like to involve more contributors to further extend the functionality of Ghostfolio (e.g. with new reports). Get in touch with me by email or on [Twitter](https://twitter.com/ghostfolio_) if you are interested, I’m happy to discuss ideas.

I would like to say thank you for all your feedback and support during the last months.

Have a great start into the new year and happy investing
Thomas from Ghostfolio
Push Zeros to End of Array(Java)
Tags: java, testing, programming, javainterviewquestion
Published: 2022-01-16 09:49:24


## Program to push Zeros to end of Array


```

public class Program1 {

	//input-->  int arr[] = {1,5,8,3,0,3,0,2,0,7,0};
	//output-->  int arr[] = {1,5,8,3,3,2,7,0,0,0,0};

	public static void PushZerosEnd(int[] arr, int n) {

		int count =0;
		for(int i=0;i<n;i++) {
			if (arr[i]!=0) {
				arr[count++]=arr[i];
			}	
		}
		while(count<n)
			arr[count++]=0;
	}

	public static void main(String[] args) {
		int arr[] = { 1, 5, 8, 3, 0, 3, 0, 2, 0, 7, 0 };
		int n = arr.length;

		PushZerosEnd(arr, n);
		System.out.println("Array after pushing Zeros to back: ");
		for(int i=0;i<n;i++) {
			System.out.print(arr[i] + ",");
		}
	}
}

```
Facing Github Phishing problem.
Tags: github, git, webdev, javascript
Published: 2022-01-16 10:32:03

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

How to solve this phishing problem in our github profile page?
If any one have any idea please help me out.I have worked lot on this profile.Looking forward for getting great suggestion.

Thank you!
keep coding.
Set up a Dockerfile for your angular application with Nginx
Tags: angular, typescript, javascript, docker
Published: 2022-01-16 09:34:53

Running your application in docker container is the first step towards production. We have to make sure that our app can build successfully , independently of our local environment.
Bellow you can find a basic dockerfile for your angular application that uses **nginx** server to render the html.

```dockerfile
FROM node:12-alpine as build

WORKDIR /app

COPY package.json .

RUN yarn install

COPY . .

RUN apk add gettext

RUN yarn build --base-href

FROM nginx:latest

COPY --from=build /app/dist/hr-frontend /usr/share/nginx/html

EXPOSE 80
```
The above dockerfile will run your application on port 80. 
To test it, in the root of your project run:

1. `docker image build --tag <your image name> .`
2. `docker run -d -p 8000:80 <your image name> ` 
This command will serve your application on port 8000. The port 80 is where your application is running inside the container.
3. Go to <u>localhost:8000</u> .
Membuat Facade Custom Laravel dan ServiceProvider
Tags: laravel, programming, javascript
Published: 2022-01-16 09:34:42

Laravel membuat para developer semakin flexible dengan adanya fitur ini, jadi kita bisa membuat **Facade** custom yang akan kita buat sendiri, disini saya hanya akan menerangkan bagaimana cara ServiceProvider dan Facade Custom dan contoh penggunaannya.

Pertama kita buat ServiceProvider terlebih dahulu contoh kita akan menarik data dari Api  [Raja Ongkir Api](https://rajaongkir.com/dokumentasi/starter)  : dan kita akan membuat file `RajaongkirServiceProvider`

```bash
php artisan make:provider RajaongkirServiceProvider 
```

dan tambahkan file class `Rajaongkir.php` di folder **Facades** yang kita buat juga jadi hasilnya nanti akan ada di `App\Facades\Rajaongkir.php`

```php
<?php

namespace App\Facades;

use Illuminate\Support\Facades\Facade;

class Rajaongkir extends Facade
{
    protected static function getFacadeAccessor()
    {
        return 'Rajaongkir';
    }
}

```

dan sekarang kita buat file untuk Servicenya di folder **Services** yang nanti akan jadi seperti ini `Services/RajaongkirService.php` dan nanti isinya seperti ini :

```php

<?php

namespace App\Services;

use Illuminate\Support\Facades\Http;

class RajaongkirService
{

    public function __construct()
    {
        $this->key = 'apikey';
        $this->url = 'https://api.rajaongkir.com/starter';
    }

    public function getProvince()
    {
// Kita gunakan facade Http untuk http client
        $data = Http::withHeaders([ 'key'  => $this->key])->acceptJson()->get($this->url.'/province');

        return $data->json();
    }
```

Cara menggunakan Facade diatas nanti kita terapkan di controller dengan contoh kita akan membuat / memunculkan Provinsi yang ada di rajaongkir, pertama kita akan buat dulu controllernya dengan :

```bash
php artisan make:controller ProvinceController
```
Lalu di index method kita akan memanggil facade tersebut

```php

<?php

namespace App\Http\Controllers\Member;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Facades\Rajaongkir;

class ProvinceController extends Controller
{
    public function index()
    {
         $province = Rajaongkir::getProvince();

dd($province);
    }
}

```
nah sekarang kita sudah bisa mengkonsumsi api dari Rajaongkir. kamu juga bisa kembangkan fitur ini untuk integrasi api, integrasi lainnya yang tak terbatas.

Semoga bermanfaat..
Bread and games
Tags: discuss, growth, personal, improvement
Published: 2022-01-16 09:32:41

---
title: Bread and games
published: true
description: Not much has changed in the past few millennia
tags: discuss, growth, personal, improvement
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sre6fz5yf46ppwn81dhn.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/bread-and-games/)._

> Seems like not much has changed since Juvenal said this. The bread was upgraded to unhealthy mixtures of salt/sugar/fat that make you crave for more, and the games have indeed become a true plural - enabling one to consume them at almost any hour of the day. The thing is, it's not necessarily 'them' who are trying to 'control' you; it's also the easier choice of an individual - to consume, to escape, and not be 'bothered' with what's really happening in his town/city/country/world. #sunday-blues

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
How to Update .env File in Laravel Programmatically
Tags: laravel
Published: 2022-01-16 08:46:20

There may be times when you want to dynamically change your .env file on the fly. This could be an admin functionality or perhaps you are creating an install script and want to be able to dynamically update the database data in your .env file.

It's actually pretty simple, just use this function to pass in the $key, $value that you want to change and it will dynamically update your environment variables.

[How to Update .env File in Laravel Programmatically](https://www.codecheef.org/article/how-to-update-env-file-in-laravel-programmatically)