teleren/devto huggingface dataset:
Pfsense as a KVM router and Firewall.
Tags: pfsense, linux
Published: 2021-07-20 06:40:52

My current homelab network setup is currently in a bridged mode with my router this means I can simply start a new VM and its accessible via LAN as my Raspberry Pi acts as a DHCP/DNS server.

To test out how PFSense works I decided to setup a PFSense VM with two networks,One for the WAN(My Router) and one for the LAN(The VM's Using new network).

What is PFSense?
You can read about it [here](https://www.podfeet.com/blog/2018/12/pfsense-router/)

This is how the PFSense KVM domain looks
> pfsense.sh
```
#!/bin/bash
virt-install --connect qemu:///system \
        --name="pfsense-router" \
        --cdrom pfSense-CE-2.5.1-RELEASE-amd64.iso \
        --disk path="pfsense-test.qcow2",size=4,bus=virtio,format=qcow2 \
        --memory=1024 \
        --graphics vnc,listen=0.0.0.0 \
        --os-variant "freebsd10.0" \
        --vcpus 2 \
        --cpu host \
        --os-type linux \
        --network network=br0,model=virtio \
        --network network=pfsense-router-net,model=virtio \
        --console pty,target_type=serial \
        --noautoconsole
```
The default Network is what I use for creating the VM's under the PFsense
network.
The following is how the PFsense router default network looks like
> custom-network.xml
```
<network>
  <name>pfsense-router-net</name>
  <uuid></uuid>
  <forward mode='nat'>
  </forward>
  <bridge name='virbr9' stp='on' delay='0'/>
  <dns enable='no'/>
  <mac address='52:54:00:a5:08:cb'/>
  <ip address='192.168.123.1' netmask='255.255.255.0'>
  </ip>
</network>
```
Setup this network using your command line
```shell
sudo virsh net-define custom-network.xml
```
Note:Setting `<dns enable='no'>` disables the use of libvirts DHCP server.

Once the installation is done the only problem I found was the WAN interface blocks all incoming connections, and you have to access the PFSense router via the LAN interface.
You can follow [this](https://advanxer.com/blog/2019/12/pfsense-enabling-administration-via-the-wan-interface/) to disable the same
Or you can simply create a new VM with a browser and access the same. When you create a new VM make sure you give it the network you created above.

That's all folks
How to write custom array flatten method in JavaScript
Published: 2021-07-20 06:39:14


```javascript
const nestedArray = [1, 2, [4, [5, 6, [[9]]]]]

// Method to flat an array
function flatten(input, list = []) {
    input.forEach((item) => {
        if (Array.isArray(item)) {
            flatten(item, list)
        } else {
            list.push(item)
        }
    })
    return list
}

```

```javascript
// Prototype to flat an array
Array.prototype.customFlatMap = function() {
    function flatten(input, list = []) {
        input.forEach((item) => {
            if (Array.isArray(item)) {
                flatten(item, list)
            } else {
                list.push(item)
            }
        })
        return list
    }
    return flatten(this)
}

const flatArray = nestedArray.customFlatMap()

console.log({ flatArray }) // [ 1, 2, 4, 5, 6, 9 ] 
```
#webdevelopment #webdesigning
Published: 2021-07-20 06:37:51

I had made a contact page where I used toggle button  and scrolling effect.i used animation first time. I made a transparent button.
I had taken the help of YouTube tutorials.
I linked all my social accounts with the images . You will see it when you click on it. You will not find anything when you click on Facebook image as I don't you fb now .
Here is a link suggest me your valuable opinions
:http://contactbysid.netlify.app
Top Cross-team Collaboration Tips for Marketers in Workplace

Tags: productivity
Published: 2021-07-20 06:37:05

As a marketer, you may find it challenging to collaborate with multiple teams especially during a remote work environment. It is because every team has different internal processes, collaboration standards, and preferences for communication. However, it is imperative for marketers to work across different teams to drive the desired outcome with team collaboration software.

Here, you may raise the question- how do marketers improve cross-team collaboration even when teams work remotely? Let’s find the answer to this question in this blog. We are mentioning some of the top collaboration tips for marketers apart from using team collaboration software.

Let’s take the examples of different teams for improving collaboration & using a team task management tool or task management software. We will start with sales because marketing and sales teams go hand-in-hand.

<h2>How to collaborate with sales?</h2>
Sales enablement strategy is useful for the sales team as it involves both resources and content necessary for them to sell effectively. Marketers can help the sales team implement this strategy by writing engaging content, case studies, FAQs, email templates, and other necessary material.

What’s more, the marketing team can brainstorm ideas to keep leads progressing and promoting the business online. Sales and marketing teams can work together to improve the user or visitor’s experience. Various team collaboration tools are also useful for both teams to work together on branding and other activities.

<h2>How to collaborate with design?</h2>
This is another important department that works closely with the marketing team. Both teams understand the customer’s requirements and expectations. The marketing team can provide visual inspirations and ideas for better design to designers. Design detailing and other suggestions can play a vital role in improving designs.

What’s more, both teams can meet regularly to discuss new trends in UI and UX designs, brand updates, market trends in branding or promotion campaigns, and the like. Both teams can also share the competitor activities and customers’ experiences to see what works best or does not fit for the campaign. Using a team task management tool, the marketing team can remain on the same page with the design team.

<b>Original Source : <a href="https://www.taskopad.com/blog/team-collaboration-tips-for-marketers/">Top Cross-team Collaboration Tips for Marketers in Workplace</a> </b>
HTML tag | section
Tags: html, tags, section
Published: 2021-07-20 06:13:50

It is used to **define a section** in a document when there is no other more specific semantic element to represent it. 

Typically, although not required, it usually has a header (`<h1>`-`<h6>`) that is used to identify each `<section>` in the document.

If its content can make sense in isolation, outside of the document, it is more appropriate to use an `<article>`.

**It should not be used as a generic container**, for that the `<div>` already exists. The `<section>` should be used only for those blocks that we want to appear in the outline of the document.

It has an **implicit ARIA role** `region` only if it has an accessible name assigned with `aria-labelledby`, `aria-label` or `title`, [in that order](https://www.scottohara.me//blog/2021/07/16/section.html). Otherwise, it has no role.

- Type: *block*
- Self-closing: *No*
- Semantic value: *Yes*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) | [Support](https://caniuse.com/mdn-html_elements_section)
I Recreated my VSCode Theme 🔥
Tags: vscode, webdev, javascript, codepen
Published: 2021-07-20 06:03:49

Hi guys!
So, couple of months back I wrote a blog "I created a VSCode theme" describing about the VS Code theme called "Martian Night" that I made. Fast forward to present, I am here to announce that I recreated my VS Code theme. But wait, what do I mean by "recreate" ?
Actually the thing is I wanted to update my theme, but for some reasons I was unable to release an update on the marketplace, so I had to unpublish the previous one and again publish the new one.

## What's new in this Theme??
There are lot of things which are new in this theme. Previously I had used only 2-3 colours for the syntax, but now I tried to introduce more colours to the syntax. Also, I introduced three variants of the theme - Normal, **Bold**, & _italics_.

### Normal 
![Normal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n53p01mo7a8ss65fiyo.png)

### Bold
![Bold](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u55v8lerydbphwmowbjo.png)

### Italics
![Italics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxi06tdpobkvvph8v8as.png)

Also, I changed the previous boring logo into something new!!
![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34pu2kz5j21wj5qhmkac.png)

## Why did I upgrade?
The previous one had a lot of issues like lack of colours, high contrast colours and no italics or bold fonts used. This is because I was pretty new to creating VS code theme that time, so I decided to improve my theme, hence I created this one!

## How can you try it?
Below are some relevant links for you to try!!

Install it from here (Marketplace) - https://marketplace.visualstudio.com/items?itemName=shaanalam718.martian-night

GitHub Repo - https://github.com/shaan71845/martian-night-vscode-theme

Feel free to leave a ⭐on the repo!!
Feedbacks and comments are appreciated!!
Thank you!!
🧐Most Confusing Part Of JavaScript.
Tags: javascript, beginners, webdev, codenewbie
Published: 2021-07-20 05:57:51

If you are working with javascript for a while, you will agree with me. This **`‘this’`** keyword is very confusing when you are writing code, especially when you read others code.
![confused](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ujarymxgyuqp94hzm0w.gif)

**This may be controversial, but for me it's the ``this`` keyword.**

➡️ **``this``** has a different values depending on where it is used.
➡️ Inside a method **``this``** refers to the owner object.
➡️ When alone **``this``** refers to the global object.
➡️ Inside a function **``this``**
this refers to the global object too.
➡️ In a function, in strict mode **``this``** is undefined.
➡️ In a event **``this``** refers to the element that received the event.

However, since 2019 I've been using **React Hooks**, I haven't had to use the **``this``** keyword once.
![hooks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m47qrekg0gm9le692wyk.png)

Learn More About React Hooks On official website.
[React Hooks.](https://reactjs.org/docs/hooks-intro.html)

**Do you like React Hooks too?**
Let's discuss it more in the comments section. If you agree don't forget to like ❤️ and save 📌

**😎Keep Focused And Just Code It!**
How to get the most out of programming courses
Tags: webdev, programming, codenewbie, beginners
Published: 2021-07-20 05:52:40

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1. Watch the entire course and take notes

In this part, you just need to watch the course and take notes

Note the concepts you didn't understand from the beginning or the important ones

Make sure that you stay focused while you do all this

### 2. Go over the notes you took

Now after you finished watching the course and taking notes you go and read all the notes once again

If you still can't understand some concepts go on and research more about them

Do this until you understand what every concept does

### 3. Go through the course once again

Now you need to go through the course once again and code along

Look over your notes from time to time

Also, make sure that you break the code and play around with it

Maybe building something similar after each lesson/video

### 4. Build a project after each chapter/section

Let's say that you finished learning about if/else statements and all that

Before you continue with the course build a project with these

Use some concepts you learned in the past too

Don't overthink this, just build something

### 5. Build the projects from the end

These days most of the courses out there have some projects at the end

If the course you're taking doesn't have any projects, search for some on Youtube to practice

Now, how to go about these projects?

First, you build the entire project along with the teacher

Then you build it once again on your own

And then you either add more features to it or build something similar

Make sure you follow these steps because this is where you'll learn the most

Best of luck!

### TL;DR

1. Watch the entire course and take notes
2. Go over the notes you took
3. Go through the course once again and code along
4. Build a project after each chapter/section
5. Build the projects from the end

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
Sejarah Perkembangan Teknologi Modern
Tags: reviewsmartphone, reviewlaptop, komputer
Published: 2021-07-20 05:20:33

Di masa modern teknologi tumbuh sangat pesat serta masif, terdapat banyak bidang yang hadapi pergantian besar- besaran akibat tergusur oleh teknologi.

Salah satu yang terbanyak merupakan layanan wartel( warung telepon) serta warnet( warung internet). Keduanya telah tidak lagi relevan mengingat tiap orang dikala ini telah mempunyai smartphone yang dapat digunakan buat menelpon serta mengakses jaringan internet.

Sejarah Perkembangan Teknologi Modern

Salah satu akibat dari timbulnya perlengkapan komunikasi merupakan mulai berkurangnya sentuhan ataupun interaksi antar manusia secara langsung. Dikala ini, kebanyakan orang apalagi terkesan“ menggampangkan” sebab apa- apa telah dapat dicoba secara online.

Bila ditarik bersumber pada sejarah perkembangannya, inilah sejarah pertumbuhan teknologi modern di Indonesia serta dunia.

1. Radio

Radio merupakan teknologi krusial yang jadi sumber data sekalian hiburan. Pertumbuhan radio di Indonesia tercatat telah diawali pada tahun 1920- an, kala pemerintah kolonial Belanda membangun sebagian stasiun radio buat keperluan internal.

Tonggak sejarah teknologi radio di Indonesia terjalin pada tahun 1945, dimana pemerintah Indonesia sukses membangun stasiun radio nasional awal yang diberi nama RRI( Radio Republik Indonesia).

2. Satelit

Siapa sih yang belum sempat mendengar kabar tentang satelit Palapa? Peluncuran satelit Palapa di masa Orde Baru( 8 Juli 1976) ialah upaya Indonesia dalam merespon kedaulatan komunikasi dan data yang efisien.

3. Timbulnya Internet( 1988)

Bermula dari proyek pembuatan Internet Protocol( IP) bernama UI- NETLAB di Universitas Indonesia, teknologi internet mulai tumbuh di Indonesia. Teknologi internet awal hasil besutan ISP IndoNet timbul pada tahun 1994 dengan menggunakan layanan dial- up. Setelah itu dekat satu tahun berselang( 1995), Kementerian Pos Telekomunikasi menerbitkan izin usaha yang ialah sinyal lampu hijau terpaut industri jaringan di Tanah Air.

Kesimpulan

Bila menilik kembali 10 ataupun 15 tahun kebelakang, pertumbuhan teknologi di Indonesia memanglah telah berkembang begitu kilat. Pertumbuhan tersebut nampak bawa pergantian di seluruh bidang, sehingga dapat dialami oleh seluruh golongan.

Walhasil, kala kita bicara soal teknologi sesungguhnya Indonesia mempunyai kesempatan yang lumayan besar. Cuma saja butuh pemahaman dan pergerakan besar supaya inovasi teknologi dapat berjalan terus menjadi maksimal.

Terlepas dari dominasi yang terjalin, pertumbuhan teknologi seolah jadi pisau bermata 2, dimana tidak hanya bawa khasiat pula sewaktu- waktu dapat melukai.

Source : https://www.toratimes.com
SASS Partials
Published: 2021-07-20 05:09:39

Partials are an incredibly useful feature of SASS. They allow you to create snippets of CSS that you can import into other SASS files for modularity.

You can denote a partial file with a leading underscore like so:
```
- styles
  - base.scss
  - _colors.scss
```

By themselves, these files won't be generated into CSS. However, variables defined in partial files will be replaced by their actual values at build time.

For example, you could have a partial file that looks like this:
```javascript
// _colors.scss
$primary-color: black;
```

and import the value into a regular .scss file like so:
```javascript
// base.scss
@import "colors";

.button {
  color: $primary-color;
}
```

*Note how you don't need the leading underscore or the file extension when importing a partial!*

Then when the css is transpiled the resulting file will look like this:
```javascript
// base.css
.button {
  color: black;
}
```
Placements & Interviews 😲 [resources & tips]
Tags: career, resume, beginners, interview
Published: 2021-07-20 04:28:34

Hello guys! **This is my first blog ever**. And it is be going to about interview preparation as this is the most [probably only] talked topic among undergrads right now. So please have a look and do comment your suggestions.

Coming to the main part, myself being an undergrad, I have looked and studied all over the internet about dos and don'ts for the upcoming season. With all the knowledge I have gained I will briefly list out main points and provide you guys with some good resources to go deeper if you want.

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

### Dos and don'ts - 

#### First of all get yourself to interview round

1. Make one good **resume** [CVs not necessary for undergrads] and tailor it according to the job/position you are applying for. Remember tailoring is important.
2. Resume must have contact details, brief summary, most recent education, project, skills, work experience[if] contained in a **single page**.

[What to include and what not to in resume](https://techinterviewhandbook.org/resume)
[Free resume builder](https://novoresume.com/)

#### For/during interview round

3. Thoroughly go through the job requirements, expectations, skillset, company background - this will help in tailoring your answers during the interview.
4. Prepare basics specific to the job and have a good understanding of the skills you mentioned in your resume.
5. Get an idea of the selection procedure of the company you have applied to.
6. Prepare answers to common questions beforehand.
7. **Most imp** - Be confident and honest during the interview!

[Interview formats and details](https://techinterviewhandbook.org/interview-formats)
[Common Interview questions](https://www.grammarly.com/blog/common-interview-questions/)

#### Post interview

8. Do not think about if your interview was bad or good or how you will stand with others, let this headache be on the interviewer's side.
9. Do check your mails regularly.
10. If selected, say yes to the offer only after understanding compensation breakdown. If not, then do a brief introspection upon the domain you can improve.

More Resources - 
[30 days of coding (best and compact)](https://www.30dayscoding.com/)
[How to prepare for placemnets](https://leverageedu.com/blog/how-to-prepare-for-placements/)
[DSA Questions (coding interview)](https://www.interviewbit.com/coding-interview-questions/)

Most of the important stuff is simplified. Readers, please share your views and resources in the comments to help peers.

[My linkedin](https://www.linkedin.com/in/devangagarwal7/)
[My Github](https://github.com/dmachine7)

Peace ✌
Perform Custom Sorting in Flutter DataGrid Widget
Tags: flutter, dart, mobile, webdev
Published: 2021-07-20 04:26:13

Learn how to perform custom sort operations in the Syncfusion [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Flutter DataGrid") widget easily. This video explains how to sort a column based on case insensitive in a DataGrid using Compare method of DataGridSource class.

Example project: 

Try sample: https://bit.ly/3kiDbs1

Complete sample: https://bit.ly/3hKvoSt

Explore tutorial videos: https://bit.ly/3fAz0Ch

{% youtube x0VXpEwlqcM %}
Tools for Remote Work
Tags: tools, remote
Published: 2021-07-27 06:38:03

---
title: Tools for Remote Work
published: true
date: 2021-07-20 04:11:15 UTC
tags: tools,remote
canonical_url: https://dils.blog/tools-for-remote-work/
cover_image: https://images.unsplash.com/photo-1616531770192-6eaea74c2456?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDN8fHJlbW90ZSUyMHdvcmt8ZW58MHx8fHwxNjI2NTI3MDEy&ixlib=rb-1.2.1&q=80&w=2000
---
Almost everyone is remote these days. Running online meetings is hard. zoom and slack help but it's tiring to be online all the time.

_Video meeting fatigue_ is a real thing. Sometimes a voice call and a desktop share does the job between a few people.

For bigger teams having a collaborative whiteboard would help. Here is where the Windows touchscreens shine. Mac users trying to draw with (so called) magic mice not so much. 😐

Otter is a nice tool to try. It transcribes your meeting notes on the fly and saves the audio as well.

Now that I've done more digging on this, Microsoft Teams seems to cover most requirements. Might suggest that in the next meeting 😀

**References**

- [Video Meeting Fatigue Is Real -- Here's How To Prevent It | Hive](https://hive.com/blog/video-meeting-fatigue/)
- [The Fast Remote Desktop Application – AnyDesk](https://anydesk.com/en)
- [7 best online whiteboards for team collaboration in 2021 | Zapier](https://zapier.com/blog/best-online-whiteboard/)
- [An Online Whiteboard & Visual Collaboration Platform for Teamwork | Miro](https://miro.com/)
- [One by Wacom: Creative Pen Tablet | Wacom](https://www.wacom.com/en-au/products/pen-tablets/one-by-wacom)
- [Otter Voice Meeting Notes - Otter.ai](https://otter.ai/)
- [Online Meeting Software | Microsoft Teams](https://www.microsoft.com/en-au/microsoft-teams/online-meetings)
What is React Native and Why you should use it ?
Tags: reactnative, flutter, react, javascript
Published: 2021-07-20 04:07:00

According to Statista, React Native is the most popular technologies for cross-platform software development of mobile applications for two years in a row.

Releasing an app on both App Store and Google Play is every business’s desire. But the trick is, before shipping a mobile app to the market, you have to choose a technology stack. Is it going to be React Native, Flutter or some other technologies ?

### What is React Native and Why you should use it ? 

React Native is a popular open-source library that runs on JavaScript.It is written with the combination of XML -Esque markup and JavaScript which is also known as JSX. React Native primarily focuses on the native rendering of applications that is majorly compatible with Android and iOS.

#### Pros of React Native

* Large developer community
* Simplified UI
* Fast Applications
* Native rendering
* Performance
* Hot-reloading

#### Popular apps made using React Native

* SoundCloud
* Instagram
* Facebook
* Flipkart
* Tesla
* Skype
* Wix
* Pinterest


![Great Right ?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y3yze7akk4z9v4y9iq6.gif)
  
## Conclusion

Now, did you get the answer to your queries related to React Native App Development? Hope you have got a crystal-clear picture to what React Native is all about and why you should go for it for creating your mobile apps.